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

已于 2023-03-02 13:06:41 修改
阅读量1.6k 收藏 1
点赞数
分类专栏： vue JavaScript 文章标签： javascript 前端 vue.js
于 2023-03-02 11:40:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Wehter/article/details/129296812
版权

slot

关于slot，使用方法很多

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

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

先看看需求：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-D3U7qHV3-1677728202280)(en-resource://database/1042:1)]

选择物料弹框为子组件，自带搜索功能，子组件多个调用位置
产品组搜索框为后期加入的需求

// 原先代码
// 父组件

<!-- 点添加，弹出物料列表 -->
    <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-column
         v-if="!paramsObj.bjType"
         prop="contractLineCode"
         :label="$t('orderThailand.RowNumber')"
         show-overflow-tooltip
         align="center"
       />
       <el-table-column v-if="paramsObj.bjType" prop="rowId" label="价格ID" show-overflow-tooltip align="center" />
       <!-- 产品大类 -->
       <el-table-column
         v-if="!paramsObj.bjType"
         prop="contractProdTcode"
         :label="$t('order.ProductCategory')"
         show-overflow-tooltip
         align="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-column
         v-if="paramsObj.bjType"
         prop="pricingUnit"
         :label="$t('orderThailand.MaterialDescrition')"
         show-overflow-tooltip
         align="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-column
         v-if="!paramsObj.bjType"
         prop="sellingPrice"
         :label="$t('orderThailand.SellingPrice')"
         show-overflow-tooltip
         align="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-column
         v-if="!paramsObj.bjType"
         prop="bankInterest"
         :label="$t('orderThailand.BankInterest')"
         show-overflow-tooltip
         align="center"
       />
       <!-- 总毛重 -->
       <el-table-column
         v-if="!paramsObj.bjType"
         prop="grossWeight"
         :label="$t('orderThailand.TotalGrossWeight')"
         show-overflow-tooltip
         align="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-column
         v-if="paramsObj.bjType"
         prop="distributionChannel"
         label="distribution Channel"
         show-overflow-tooltip
         align="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"
         background
         layout="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 = 1
     this.fetchModalData()
   },
   // 分页
   handleSizeChange(val) {
     this.modalPage.size = val
     this.modalPage.current = 1
     this.fetchModalData()
   },
   handleCurrentChange(val) {
     this.modalPage.current = val
     this.fetchModalData()
   },
   onReset() {
     this.$emit('onpReset')
     this.searchObj = {}
     this.modalPage.current = 1
     this.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.piCode
       url = 'getPiMaterialExtendsPrice'
     } else if (this.paramsObj?.contractCode?.length && !this.paramsObj.bjType) {
       obj.contractCode = this.paramsObj.contractCode
       url = 'getMaterialExtendsPrice'
     } else {
       // 备件物料接口
       url = 'getBjMaterialExtendsPrice'
     }
     if (this.searchObj.materialCode) obj.materialCode = this.searchObj.materialCode
     if (this.prodType && !reset) obj.prodType = this.prodType
     if (reset) delete obj.prodType
     api[url]({ ...obj })
       .then(res => {
         if (obj.piCode || this.paramsObj.bjType) {
           if (res.code === 0) {
             this.materialList = res.data.records
             this.modalPage.total = res.data.total
           }
         } else {
           if (res.records.length) {
             this.materialList = res.records
             this.modalPage.total = res.total
           }
         }
       })
       .catch(error => {})
   },
 },
}
</script>
Wether or not
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Python列表的地址占用_CodingPark
CodingPark 编程公园
02-03 233
你看到的相同，未必是真的相同 copy与deepcopy
vue slot与传参实例代码讲解
10-17
在子组件中，我们可以使用`slot`属性绑定数据，然后在父组件中通过`slot-scope`获取这些数据。例如： ```html // 子组件 <slot name="test" :list2="list2"></slot> <slot :sName="name"></slot> // 父组件 ...
vue3具名插槽（slot）
徐同保的专栏
05-13 236
vue3具名插槽（slot）
vue2 中双向绑定失效的几种情况，以及如何解决
jt15881622410的博客
06-13 6159
当在异步操作（如定时器、Ajax请求、Promise等）中修改数据时，Vue可能无法即时检测到数据的变化，导致双向绑定失效。如果在Vue实例初始化之后，动态地添加新的属性到数据对象上，Vue也无法追踪这些属性的变化，从而导致双向绑定失效。当直接对Vue组件中的对象或数组进行赋值时，Vue将无法捕获到该变动，导致双向绑定失效。传递的父组件属性时，Vue不会自动更新父组件的属性，导致双向绑定失效。总结起来，解决Vue 2中双向绑定失效的方法包括使用Vue提供的。来触发自定义事件并更新父组件的属性。
vue3具名插槽（slot），如何把子组件的数据传递给父组件
最新发布
徐同保的专栏
05-13 1123
vue3具名插槽（slot），如何把子组件的数据传递给父组件
解决富文本编辑器（wangeditor）在vue项目中不能双向数据绑定（v-model）的问题
weixin_46475440的博客
05-21 4909
将富文本编辑器封装成一个组件 首先要明白一个原理，vue中的v-model指令（双向数据绑定）其实这是一种语法糖，它只是给其绑定节点添加了一个input事件，并且给他添加了一个value属性，数值发生变化，他会更新data中的数据，在更新节点的value，从而实现双向数据绑定。 /src/component/Editor/index.vue 组件代码 <template> <div> <div id="seditor" ref="seditor" @input="c
探索vue父子组件实现数据双向绑定失败的原因
qq_39258914的博客
08-24 1705
有很多时候你会希望在子组件发生的数据变化也映射到父组件，也就是父组件不进行其他操作，数据也能随着子组件的操作而做出相应变化，举个列子说明一下导致这个双向绑定失败的原因 父组件部分： &lt;template&gt; &lt;div&gt; &lt;mytest v-model="arr1"&gt;&lt;/mytest&gt; &lt;/div&gt; &lt;t..
项目中slot-scope的用法
qq_37683424的博客
08-11 3384
插槽slot的作用，是给组件留位置可以在另一个组件中增加不需复用的内容。 slot-scope这个属性，我在AT-GS950/28PS V2项目中发现之前我暂未用到，与正常插槽相比是可以传递数据，叫做作用域插槽 在Table这个公共的组件中，都是插槽内容，slot-scope 可以获取到tableData这个数据，并且这个数先是用v-model传到公共组件table用value来接收，在用slot-scope的特性传回到父组件 tip:父组件 tip:子组件 ...
Vue的slot传参
Wehter的博客
03-02 1465
Vue的slot传参
Vue循环中多个input绑定指定v-model实例
10-14
在Vue.js中，`v-model`是一个非常强大的特性，它实现了视图与数据的双向绑定，使得我们在处理用户输入时能轻松地获取和更新数据。当涉及到在循环中使用`v-model`时，通常是为了创建多个类似的表单元素，如在列表或...
18.（vue3.x+vite）组件间通信方式之v-model.rar
09-20
本示例"18.（vue3.x+vite）组件间通信方式之v-model.rar"将深入探讨如何在Vue 3.x和Vite构建环境中利用`v-model`进行组件间的双向数据绑定。 首先，Vue 3.x中的`v-model`不再局限于输入元素，而是扩展到了自定义...
vue插槽slot-传值
Stavin Li的博客
01-30 822
Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 元素作为承载分发内容的出口。
slot学习(采用vue2代码展示)
hujian66的博客
05-05 1305
slot 学习, 采用Vue2代码进行展示.
slot-scope
weixin_35755640的博客
01-14 116
slot-scope 是 Vue.js 中的一个特性，它可以让组件之间的通信更加灵活。slot-scope 允许父组件向子组件传递数据，并在子组件中获取这些数据，从而实现组件之间的通信。 ...
vue 利用slot向父组件传值
热门推荐
u010320804的博客
03-08 1万+
闲话不多说，上代码子组件，里面有slot插槽，并在slot上绑定了text值&lt;template&gt; &lt;div @click="$emit('change',checked+1)"&gt; &lt;slot name="icon" :text="text"&gt;&lt;/slot&gt; &lt;/div&gt; &lt;/tem
Vue的slot-scope和scope.row
qq_23260455的博客
04-28 3429
实现效果：根据后端传来的mg_state的bool型数据来渲染开关状态，当为true时，开关打开；为false时关闭 解决：状态开关属于单元格，也属于一行，如果我们拿到这一行的数据，就可以.mg_state具体值，则可以按需渲染效果。所以想到用作用域插槽来渲染状态这一列 <el-table :data="userlist" border stripe> <el-table-column type="index"></el-table-column> &lt
vue2组件通信方法
m0_61004873的博客
03-07 1169
1.props/$emit props：props可以是数组或对象，用于接收来自父组件通过v-bind传递的数据。当props为数组时，直接接收父组件传递的属性； 当 props 为对象时，可以通过type、default、required、validator等配置来设置属性的类型、默认值、是否必传和校验规则。 $emit：在父子组件通信时，我们通常会使用 $emit来触发父组件v-on在子组件上绑定相应事件的监听。 2.v-slot v-slot是Vue2.6版本中新增的用于统一实现插槽和具名..
Vue-EventBus
WFL804203164的博客
01-04 338
定义 全局定义，可以将eventBus绑定到vue实例的原型上,也可以直接绑定到window对象上。 //main.js(可以是任意JS写) //方式一 Vue.prototype.$EventBus = new Vue(); // 在mian中，方式一可以这么写 new Vue({ router, render: h => h(App), beforeCreated() { Vue.prototype.$EventBus = this } }).$mount('#app')
Vue 组件利用Slot插件作用域的参数传递
rocklee的专栏
07-16 5492
下面我做个例子，比如我的组件里面的查询栏里面开了一个插槽，希望调用方引用我这组件时可以增加状态查询的输入，并且将查询参数queryParam传过去...
vue 判断表格字段绑定v-model
06-02
如果你要在表格中绑定 `v-model`，可以使用 `scoped slots`，然后在 slot 中绑定 `v-model`，以便你可以对表格数据进行修改。 假设你的表格数据是一个数组 `tableData`，其中每个元素都有一个 `name` 字段，你想要在表格中绑定 `v-model`，以便你可以编辑该字段。你可以这样做： 在你的表格列定义中，为 `name` 字段定义一个 `scoped slot`，然后在 slot 中绑定 `v-model`： ``` <el-table-column label="名称"> <template slot-scope="scope"> <el-input v-model="scope.row.name" placeholder="请输入名称"></el-input> </template> </el-table-column> ``` 这样，你就可以在表格中编辑每个元素的 `name` 字段了。 如果你想要在编辑时进行其他操作，可以使用 `@change` 事件，它会在 `v-model` 改变时触发： ``` <el-table-column label="名称"> <template slot-scope="scope"> <el-input v-model="scope.row.name" placeholder="请输入名称" @change="handleNameChange(scope.row)"></el-input> </template> </el-table-column> methods: { handleNameChange(row) { console.log('name changed', row.name) // do something else } } ``` 这样，每次编辑某个元素的 `name` 字段时，都会触发 `handleNameChange` 方法。你可以在该方法中进行其他操作，例如保存修改等。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值