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

场景

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

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

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

javascript 代码

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

尝试解决

吾辈找到一种方式

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

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

解决

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

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