关于vue中的sync修饰符和el-select使用时遇到的问题

最新推荐文章于 2024-05-24 16:05:04 发布
最新推荐文章于 2024-05-24 16:05:04 发布
阅读量651 收藏 1
点赞数 5
分类专栏： vue 文章标签： vue.js elementui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Zye8899/article/details/118757768
版权

关于vue中的sync修饰符和el-select使用时遇到的问题

由于项目中需要多次用到select组件且逻辑大体相同,决定将其封装为组件. 但是其中涉及到组件之间v-modle数据双向流通问题,而vue官方文档为我们提供了.sync修饰符,允许我们在子组件中修改父组件传过来的props值. 如下:

父组件:
在这里插入图片描述

子组件:
在这里插入图片描述

必须在子组件里合适的位置进行this.$emit('update:value', val)才可生效
在这里插入图片描述
保存运行,发现选择下拉框内容时还是报子组件不可修改父组件传过来的props的值的错:
在这里插入图片描述
但是会到父组件,发现ruleForm里面对应的值确实被更新了,这就说明this.$emit('update:value', val)确实生效了.奈何报错太扎眼,只能继续往下查.经过断点调试,发现在未进行emit时报错就已经出现了,就说明一定有某个地方在我emit之前就去修改了value值. 此时突然想到el-select的change事件里面的一句话:
在这里插入图片描述
原来change事件被触发之前value就已经被改变了,而我没办法处理到这个变化(定义在组件内部了).吃了没认真看文档的亏. 但是问题还的解决,因为这个value值变化我没办法控制,所以只能在子组件中从新定义一个值去代替父组件传过来的value.再在change事件里面去更新父组件中的value.代码如下:
在这里插入图片描述
至此完美及解决问题.(还是要好好看文档呀~~)

别动那块巧克力
关注
  • 5
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
记一个Vue官方文档中关于修饰符.sync的坑
sevenddddddd的博客
04-20 4778
Vue官方文档“组件”一栏中提到，Vue在2.0移除了.sync，又在2.3重新添加了它，但是采用了全新的内部逻辑：这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。只有在子组件中显式传递一个名为update:变量名的自定义事件，父组件的相应变量才会被更新。下面是坑：Vue官方文档中对于最新版的.sync修饰符的原理解释如下： 如下代码 <com
Vue父子组件的数据传递
A cold winter的博客
09-30 149
Vue有一个单项数据流的概念，我们不能对父组件传递过来的属性直接修改，因为一个父组件可能会有多个子组件，这个属性也有很多个子组件在使用，这个子组件修改了会影响另一个子组件。那么我们就是需要对传递过来的属性值进行修改该怎么办呢？ ...
Vue3使用Naive UI组件时如何使用n-select
最新发布
Cy01234的博客
05-24 668
在利用vue3框架进行开发时尤大大推荐使用naive ui组件进行开发。这里来详解n-select的具体使用方法和功能。
vue 封装组件使用时报错
weixin_41807530的博客
10-13 241
components 注册组件一定要写在 methods 前。
父组件向子组件传值，父组件值更新，调用子组件方法，方法中拿到的还是旧值
xym100111100的博客
06-19 1194
vue props传参子组件拿到的还是上一次的值
Vue中sync修饰符的用法
小葵坤_易安的博客
09-02 588
场景：在父组件的data中定义一个变量，希望在子组件中改变这个变量，并传递给父组件 父组件： <template> <div> <select-dialog v-if="showChoiceDialog" :show.sync="showChoiceDialog" :select.sync="selectResult" ></select-dialog&g
Vue解决父子组件传值，子组件改变值后父组件的值也改变的问题
热门推荐
weixin_43254676的博客
06-10 1万+
Vue解决父子组件传值，子组件改变值后父组件的值也改变的问题
vue——解决父子组件传值，子组件改变值后父组件的值也会随之改变
weixin_44732078的博客
11-08 3239
解决父子组件传值，子组件改变值后父组件的值也会随之改变
Vue 中 sync中的巨坑
chengxi1014的博客
07-06 538
在使用sync给数组元素同步时, 错误用法如下: <xxx v-for="(v,k) in arr" :ppp.sync="v" ></xxx> 正确用法如下: <xxx v-for="(v,k) in arr" :ppp.sync="arr[k]" ></xxx> 因为 sync 是语法糖,会被扩展成 :ppp.update="val=>arr[k]=val" 赋值给v的话只能使v指向新的对象,而无法改变原数组内容 ...
在vue开发中遇到的一个小bug，el-select数据视图不统一。
sha虫剂的博客
06-01 1712
一、项目需求 在一个项目需求中，我们很多时候需要进行地区的三级联动选择，这个相信很多人都不陌生，也就不过多介绍了，但是在有的时候，我们需要进行等级选择 1、等级选省级择只能选择省级菜单，市级和县级隐藏， 2、选择市级，那么只隐藏县级菜单， 3、选择县级都不隐藏 如： 二、可能产生的bug 在选择的时候，我们有可能选择县级，区域全部选择完成，但突然又改为市级，那么这个时候就要重置数据，如不重置，上传时会把已经隐藏的县级code也一起传给后台，造成bug 三、如何解决 解决当然很简单，就是在每一次区域选择的时
element el-select组件双向绑定封装与使用
超级婷
03-09 1340
element el-select双向绑定封装
vue开发技巧之.sync
weixin_63305031的博客
11-13 819
在实际开发过程中，难免遇到父子组件套用，父组件向子组件传值，子组件需要修改父组件传递进来的值。当然，vue也会给你出现如下的报错（避免直接更改属性，因为只要父组件重新渲染，该值就会被覆盖。在这种解决子修改父组件传递的值的思路中，会有一个隐患，就是，你每传过去一个值，绑定需要一行，监听需要一行，那么就是两行代码，如果传两个呢，三个呢，四个呢，就会使父组件中代码变得很长。相当于给props开启了双向数据绑定。解决这个问题的方法是，在子组件的回调函数中派发一个自定义事件，然后在父组件中监听事件。
子组件中修改props值 （setup + ts + vue3） | emit(‘update:value‘,value) 使用方法
fchf_001的博客
06-08 5624
父级 prop 的更新会向下流动到子组件中，但是反过来则不行。因此子组件中不可以修改prop值，否则会报错，导致程序无法运行。因为我怕命名混乱，所以父组件子组件中都使用的同一个命名 isCheck。父子 prop 之间存在一个。当前修改的key为只读属性。
【Vue.js 3.0】 emit(“update:modelValue“) 双向绑定
day day up
07-05 6990
在Vue 3中，emit('update:modelValue')的作用是触发一个名为update:modelValue的自定义事件。这个事件通常用于实现父子组件之间的双向数据绑定
Vue:父子组件传值（ props、sync、v-model ）
流云细水
02-02 2132
Vue 父子组件传值
Vue 子组件修改父组件传递过来的值
weixin_45442464的博客
08-26 1万+
1. 常用的方法 一般通过子组件修改父组件传递过来的值,我们就会采用props和$emit进行单向数据绑定 父组件: <template> <div> <test :value="value" @change="change"></test> </div> </template> <script> import test from '@/components/test.vue' export d
实践笔记——vue父子组件数据双向绑定
betty_grant的博客
10-27 479
背景 Vue设计中props为单向数据流，即props数据在父组件进行修改，并流向子组件。而在子组件里只能对props数据进行读取，不能进行修改，否则会触发报错。 为了达到在子组件里修改props值的要求，需要通过以下2步来实现 1. 父组件使用子组件时给prop值（value）添加.sync修饰符 2. 子组件通过this.$emit("update:value", this.valueText)修改prop值（value）的值 //child.js export default { ..
vue中this.$emit(“update:xx“,value)和xx.sync的用法
mhbsoft的博客
05-11 365
父组件的message必须与子组件中的message相同，才会起作用。
.sync修饰符传递参数
yezi153的博客
11-29 688
1..sync修饰符在父子组件之间传值可以传多个 2.传值方式:属性名.sync=“属性名" 前一个名字是传递之后子组件接收时的名字，后一个是传递的参数的属性名 3.怎么修改父组件传递给子组件的数据，通知父组件修改监听父组件的update事件 父组件传递数据和修改自己内部的数据 通知父组件要修改数据 ...
Element的Select分组全选模式
weixin_45785873的博客
06-07 2225
在一些业务场景中，我们可能需要让下拉选择，支持分组的同时，支持全选，Element中的Select支持分组，但不支持全选，Cascader 级联选择器支持分组，也支持全选，但是他的显示不在同一垂直方向。因此，去修改Select，是比较方便和有效的方法。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值