解决vue的slot传参无法使用v-model双向数据绑定的问题

slot

关于slot，使用方法很多

但是最近使用slot的时候发现了一个问题：无法直接双向绑定

父组件可以直接展示子组件的变量，但是无法双向数据绑定，于是放弃了slot传参解决方案 使用prop方法，也可以使用this.$parents

先看看需求：

选择物料弹框为子组件，自带搜索功能，子组件多个调用位置

产品组搜索框为后期加入的需求

// 原先代码// 父组件<!-- 点添加，弹出物料列表 --><material-list v-if="dialogVisible3":dialog-visible3="dialogVisible3":prod-type="prodType":params-obj="paramsObj"@fetchSelectList="fetchSelectList"></material-list>// 子组件并没有slot，没有产品组搜索条件框<el-form label-width="30%"><el-row :gutter="24"><el-col :span="6"><!-- 物料号 --><el-form-item :label="$t('order.Material')" prop="materialCode"><el-input v-model="searchObj.materialCode" clearable :placeholder="$t('PleaseEnter')" /></el-form-item></el-col><el-col :span="12"><el-button type="primary" icon="el-icon-search" @click="handleQuery">{{$t('Search') }}</el-button><el-button icon="el-icon-delete" @click="onReset">{{$t('Reset') }}</el-button></el-col></el-row></el-form>

// 解决方法// 方法一父组件<material-list v-if="dialogVisible3" :dialog-visible3="dialogVisible3" :prod-type="prodType" :params-obj="paramsObj" @fetchSelectList="fetchSelectList"><!-- 增加物料搜索条件 --><template slot="queryParam"><el-form-item :label="$t('contract.ProductGroup')" prop="prodType"><el-select v-model="prodType" style="width: 100%" :placeholder="$t('PleaseSelect')" clearable filterable><el-option v-for="item in ProductGroupList" :key="item.value" :value="item.value" :label="item.labelEn" /></el-select></el-form-item></template></material-list><script>export default {data(){return {ProductGroupList: [],prodType: '',}}}</script>// 子组件<el-form label-width="30%"><el-row :gutter="24"><el-col :span="6"><!-- 物料号 --><el-form-item :label="$t('order.Material')" prop="materialCode"><el-input v-model="searchObj.materialCode" clearable :placeholder="$t('PleaseEnter')" /></el-form-item></el-col><!-- 增加父组件的搜索条件slot --><el-col :span="6"><slot name="queryParam" /></el-col><el-col :span="12"><el-button type="primary" icon="el-icon-search" @click="handleQuery">{{$t('Search') }}</el-button><el-button icon="el-icon-delete" @click="onReset">{{$t('Reset') }}</el-button></el-col></el-row></el-form><script> export default {data(){return {materialList: [],searchObj: {materialCode: '',},}},methods:{}}</script>

分割

// 问题来了，怎么才能拿到父组件中的参数，slot是父组件创建，参数也是父组件的，子组件怎么才能拿到？// 通过this.$parent.$parent.prodType去访问// obj是请求的参数this.$parent.$parent.prodType ? obj.prodType = this.$parent.$parent.prodType : obj.prodType = ''api.selectListByDateOrType({obj }).then(res =>{})

// 解决办法二：总体解决思路就是父组件定义一个变量，然后通过prop传给子组件，查询的时候给obj 赋值，同时，有一个清空方法，在父组件定义,点击子组件的时候给触发定义在父组件的方法（this.prodType = ''）// 父组件代码// 增加 :prod-type="prodType" 绑定@onpReset="onpReset"<material-list v-if="dialogVisible3" :dialog-visible3="dialogVisible3" :prod-type="prodType" :params-obj="paramsObj" @fetchSelectList="fetchSelectList" @onpReset="onpReset"><template slot="queryParam"><el-form-item :label="$t('order.Material')" prop="materialCode"><el-input v-model="prodType" clearable :placeholder="$t('PleaseEnter')" /></el-form-item></template></material-list>data(){return:{prodType: ''}}，methods：{onpReset() {this.prodType = ''}}// 子组件代码<template><div><!-- SelectMaterial - 选择物料 --><el-dialog :title="$t('order.SelectMaterial')" :visible.sync="dialogVisible3" :show-close="false" :destroy-on-close="true" width="70%"><el-form label-width="30%"><el-row :gutter="24"><el-col :span="6"><!-- 物料号 --><el-form-item :label="$t('order.Material')" prop="materialCode"><el-input v-model="searchObj.materialCode" clearable :placeholder="$t('PleaseEnter')" /></el-form-item></el-col><el-col :span="6"><slot name="queryParam" /></el-col><el-col :span="12"><el-button type="primary" icon="el-icon-search" @click="handleQuery">{{$t('Search') }}</el-button><el-button icon="el-icon-delete" @click="onReset">{{$t('Reset') }}</el-button></el-col></el-row></el-form><el-table :data="materialList" border style="width: 100%" @selection-change="handleSelectionChange"><el-table-column type="selection" width="40" style="text-align: center" /><el-table-column :label="$t('NumberIndex')" :index="indexMethod" width="60" type="index" align="center" /><!-- 行项目号 --><el-table-columnv-if="!paramsObj.bjType"prop="contractLineCode":label="$t('orderThailand.RowNumber')"show-overflow-tooltipalign="center"/><el-table-column v-if="paramsObj.bjType" prop="rowId" label="价格ID" show-overflow-tooltip align="center" /><!-- 产品大类 --><el-table-columnv-if="!paramsObj.bjType"prop="contractProdTcode":label="$t('order.ProductCategory')"show-overflow-tooltipalign="center"/><el-table-column v-if="paramsObj.bjType" prop="contractProdTName" :label="$t('order.ProductCategory')" show-overflow-tooltip align="center" /><!-- 海尔型号 --><el-table-column v-if="!paramsObj.bjType" prop="contractHaierModel" :label="$t('order.HaierModel')" show-overflow-tooltip align="center" /><!-- 客户型号 --><el-table-column v-if="!paramsObj.bjType" prop="customerModel" :label="$t('order.CustomerModel')" show-overflow-tooltip align="center" /><!-- 特技单号 --><el-table-column v-if="!paramsObj.bjType" prop="affirmCode" :label="$t('orderThailand.STRCNo')" show-overflow-tooltip align="center" /><!-- 物料号 --><el-table-column prop="materialCode" :label="$t('order.Material')" show-overflow-tooltip align="center" /><!-- 物料描述 --><el-table-columnv-if="paramsObj.bjType"prop="pricingUnit":label="$t('orderThailand.MaterialDescrition')"show-overflow-tooltipalign="center"/><!-- 目的港 --><el-table-column v-if="!paramsObj.bjType" prop="destinationPort" :label="$t('order.DestPort')" show-overflow-tooltip align="center" /><!-- 数量 --><el-table-column v-if="!paramsObj.bjType" prop="qty" :label="$t('order.OrderQuantity')" show-overflow-tooltip align="center" /><!-- 销售价格 --><el-table-columnv-if="!paramsObj.bjType"prop="sellingPrice":label="$t('orderThailand.SellingPrice')"show-overflow-tooltipalign="center"/><!-- 订单价格 --><el-table-column v-if="!paramsObj.bjType" prop="orderPrice" :label="$t('orderThailand.OrderPrice')" show-overflow-tooltip align="center" /><!-- 报关价格 --><el-table-column v-if="!paramsObj.bjType" prop="orderPrice" :label="$t('orderThailand.DeclarationPrice')" show-overflow-tooltip align="center" /><!-- 保费 --><el-table-column v-if="!paramsObj.bjType" prop="insurance" :label="$t('orderThailand.InsuranceFee')" show-overflow-tooltip align="center" /><!-- 银行费用 --><el-table-columnv-if="!paramsObj.bjType"prop="bankInterest":label="$t('orderThailand.BankInterest')"show-overflow-tooltipalign="center"/><!-- 总毛重 --><el-table-columnv-if="!paramsObj.bjType"prop="grossWeight":label="$t('orderThailand.TotalGrossWeight')"show-overflow-tooltipalign="center"/><!-- 总净重 --><el-table-column v-if="!paramsObj.bjType" prop="netWeight" :label="$t('orderThailand.TotalNetWeight')" show-overflow-tooltip align="center" /><!-- 总体积 --><el-table-column v-if="!paramsObj.bjType" prop="grossValue" :label="$t('orderThailand.TotalVolume')" show-overflow-tooltip align="center" /><!-- 单位 --><el-table-column v-if="!paramsObj.bjType" prop="primaryUom" :label="$t('orderThailand.Unit')" show-overflow-tooltip align="center" /><!-- 品牌 --><el-table-column v-if="!paramsObj.bjType" prop="brandName" :label="$t('orderThailand.Brand')" show-overflow-tooltip align="center" /><!-- 备件物料单位 --><el-table-column v-if="paramsObj.bjType" prop="pricingUnit" :label="$t('orderThailand.Unit')" show-overflow-tooltip align="center" /><!-- 单价 --><el-table-column v-if="paramsObj.bjType" prop="price" :label="$t('orderThailand.UnitPrice')" show-overflow-tooltip align="center" /><el-table-columnv-if="paramsObj.bjType"prop="distributionChannel"label="distribution Channel"show-overflow-tooltipalign="center"width="160"/><el-table-column v-if="paramsObj.bjType" prop="startDate" :label="$t('orderThailand.effectiveStartTime')" show-overflow-tooltip align="center" width="160" /><el-table-column v-if="paramsObj.bjType" prop="endDate" :label="$t('orderThailand.effectiveEndTime')" show-overflow-tooltip align="center" width="160" /></el-table><div class="pagination" style="background: #fff; width: 100%; text-align: right; padding: 20px 0"><el-pagination:current-page="modalPage.current":page-size="modalPage.size"backgroundlayout="total, sizes, prev, pager, next,jumper":total="modalPage.total"@size-change="handleSizeChange"@current-change="handleCurrentChange"/></div><span slot="footer" class="dialog-footer"><el-button @click="dialogMaterialListClose">{{$t('Cancel') }}</el-button><el-button type="primary" @click="handleAdd">{{$t('determine') }}</el-button></span></el-dialog></div></template><script>import * as api from '../orderCreate/api'// import { getStore } from '@/util/store'// import { dateFormat } from '@/util/date.js'export default {props: ['dialogVisible3', 'paramsObj','prodType'],data() {return {materialList: [],searchObj: {materialCode: '',prodType: '',},modalPage: {current: 1,size: 10,total: 0,},toAddObj: [],multipleSelections: [], //批量选择}},mounted() {this.fetchModalData()},methods: {// 物料单弹框关闭dialogMaterialListClose() {this.$emit('fetchSelectList', false, [])this.materialList = []},// 合同物料添加handleAdd() {this.$emit('fetchSelectList', false, this.multipleSelections)},/** 批量选择 **/handleSelectionChange(val) {this.multipleSelections = val},// index序号indexMethod(index) {return (this.modalPage.current - 1) * this.modalPage.size + index + 1},// 选择当前物料拿详情selectModalList(row) {this.dialogVisible = false},handleQuery() {this.modalPage.current = 1this.fetchModalData()},// 分页handleSizeChange(val) {this.modalPage.size = valthis.modalPage.current = 1this.fetchModalData()},handleCurrentChange(val) {this.modalPage.current = valthis.fetchModalData()},onReset() {this.$emit('onpReset')this.searchObj = {}this.modalPage.current = 1this.fetchModalData('reset')},fetchModalData(reset) {var url = ''var obj = {size: this.modalPage.size,current: this.modalPage.current,}if (this.paramsObj?.piCode?.length) {obj.piCode = this.paramsObj.piCodeurl = 'getPiMaterialExtendsPrice'} else if (this.paramsObj?.contractCode?.length && !this.paramsObj.bjType) {obj.contractCode = this.paramsObj.contractCodeurl = 'getMaterialExtendsPrice'} else {// 备件物料接口url = 'getBjMaterialExtendsPrice'}if (this.searchObj.materialCode) obj.materialCode = this.searchObj.materialCodeif (this.prodType && !reset) obj.prodType = this.prodTypeif (reset) delete obj.prodTypeapi[url]({...obj }).then(res => {if (obj.piCode || this.paramsObj.bjType) {if (res.code === 0) {this.materialList = res.data.recordsthis.modalPage.total = res.data.total}} else {if (res.records.length) {this.materialList = res.recordsthis.modalPage.total = res.total}}}).catch(error => {})},},}</script>