好资源导航 » 文章资讯 » vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案

vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案

2023-07-05 00:13:02 71

场景

今天在使用v-model进行组件双向数据绑定的时候遇到了一个奇怪的问题，网页本身运行正常，浏览器一直出现警告信息。

[Vuewarn]:Avoidmutatingapropdirectlysincethevaluewillbeoverwrittenwhenevertheparentcomponentre-renders.Instead,useadataorcomputedpropertybasedontheprop'svalue.Propbeingmutated:"value"

引发这个警告的是一个自定义组件RxSelect

Vue.component("RxSelect",{
model:{
prop:"value",
event:"change",
},
props:{
value:[Number,String],
map:Map,
},
template:`

`,
});

吾辈使用的代码看起来代码貌似没什么问题？


当前选择的性别是:{{map.get(sex)}}

JavaScript代码

newVue({
el:"#app",
data:{
map:newMap().set(1,"保密").set(2,"男").set(3,"女"),
sex:"",
},
});

经测试，程序本身运行正常，父子组件的传值也没什么问题，双向数据绑定确实生效了，然而浏览器就是一直报错。

尝试解决

吾辈找到一种方式

为需要双向绑定的变量在组件内部data声明一个变量innerValue，并初始化为value
在select上使用v-model绑定这个变量innerValue
监听value的变化，在父组件中value变化时修改innerValue的值
监听innerValue的变化，在变化时使用this.$emit('change',val)告诉父组件需要更新value的值

Vue.component("RxSelect",{
model:{
prop:"value",
event:"change",
},
props:{
value:[Number,String],
map:Map,
},
data(){
return{
innerValue:this.value,
};
},
watch:{
value(val){
this.innerValue=val;
},
innerValue(val){
this.$emit("change",val);
},
},
template:`



`,
});

使用代码完全一样，然而组件RxSelect的代码却多了许多。。。

解决

一种更优雅的方式是使用computed计算属性以及其的get/set，代码增加的程度还是可以接受的

Vue.component("RxSelect",{
model:{
prop:"value",
event:"change",
},
props:{
value:[Number,String],
map:Map,
},
computed:{
innerValue:{
get(){
returnthis.value;
},
set(val){
this.$emit("change",val);
},
},
},
template:`



`,
});

以上就是vue使用v-model双向绑定父子组件的值遇见的问题及解决方案的详细内容，更多关于vue使用v-model双向绑定父子组件的值的资料请关注毛票票其它相关文章！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案

场景

尝试解决

解决

热门推荐

随机推荐