vue实现父子组件双向数据绑定,v-model组件双向绑定怎么使用
本文主要介绍vue在使用v-model双向绑定父子组件值时遇到的问题及其解决方法，有助于你更好的理解和学习使用vue框架。感兴趣的朋友可以了解一下。
目录
场景试图解决问题。
场景
今天用v-model绑定组件双向数据时遇到了一个奇怪的问题。网页本身运行正常，浏览器一直显示警告信息。
[Vue warn]:避免直接改变道具，因为只要父组件重新渲染，该值就会被覆盖。相反，使用基于属性值的数据或计算属性。被变异的道具：“值”
该警告由自定义组件RxSelect触发。
Vue.component(RxSelect ，{
型号：{
属性：“值”，
事件：“更改”，
},
道具：{
值：[数字，字符串]，
地图：地图，
},
模板：` 1
挑选
v-model=值
@change=$emit(change ，value)
选择权
v-for=[k，v] in map
:值=k
:key=k
{{v}}/option
/选择
`,
});
我们这代人用的代码好像也没问题。
主id=应用程序
当前选择的性别是：{{map.get(sex)}}
差异
rx-select:map= map v-model= sex /
/div
/main
JavaScript代码
新Vue({
埃尔： #app ，
数据：{
地图：新地图()。set(1，机密)。设置(2，男性)。设置(3，“母”)，
性别： ，
},
});
经过测试，程序本身运行正常，亲子组件的值传递没有问题。双向数据绑定确实有效，但是浏览器不断报告错误。
尝试解决
我们找到了一种方法。
在需要双向绑定的变量的组件内部数据中声明一个变量innerValue，并将其初始化为Value。
使用v-model在select上绑定此变量innerValue。
监视值的变化，当父组件中的值发生变化时，修改innerValue的值。
监视innerValue的变化，当它变化时，使用这个。$emit(change ，val)告诉父组件它需要更新value的值
Vue.component(RxSelect ，{
型号：{
属性：“值”，
事件：“更改”，
},
道具：{
值：[数字，字符串]，
地图：地图，
},
data() {
返回{
innerValue: this.value，
};
},
观察：{
值(val) {
this.innerValue=val
},
内部值(val) {
这个。$emit(change ，val)；
},
},
模板：` 1
select v-model=innerValue
选择权
v-for=[k，v] in map
:值=k
:key=k
{{v}}/option
/选择
`,
});
代码完全一样，但是组件RxSelect的代码多了很多。
解决
更优雅的方式是使用computed来计算属性及其get/set，代码增加仍然可以接受。
Vue.component(RxSelect ，{
型号：{
属性：“值”，
事件：“更改”，
},
道具：{
值：[数字，字符串]，
地图：地图，
},
计算值：{
内部值：{
get() {
返回this.value
},
设置(值){
这个。$emit(change ，val)；
},
},
},
模板：` 1
select v-model=innerValue
选择权
v-for=[k，v] in map
:值=k
:key=k
{{v}}/option
/选择
`,
});
以上是vue在使用v-model绑定父子组件值时遇到的问题和解决方法的细节。更多关于vue使用v-model绑定亲子组件值的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。