vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
导读:收集整理的这篇文章主要介绍了vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案,觉得挺不错的,现在分享给大家,也给大家做个参考。 目录场景尝试解决解决场景今天在使用...
收集整理的这篇文章主要介绍了vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案,觉得挺不错的,现在分享给大家,也给大家做个参考。 目录
- 场景
- 尝试解决
- 解决
场景
今天在使用 v-model
进行组件双向数据绑定的时候遇到了一个奇怪的问题,网页本身运行正常,浏览器一直出现警告信息。
[Vue warn]: Avoid mutating a PRop directly since the value will be overwrITten whenever the parent component re-renders. Instead, use a data or computed proPErty based on the prop's value. Prop being mutated: "value"
引发这个警告的是一个自定义组件 RxSelect
Vue.COMponent("RxSelect", { model: { prop: "value", event: "change", } , props: { value: [Number, String], map: Map, } , template: ` select v-model="value" @change="$emit('change', value)" > option v-for="[k,v] in map" :value="k" :key="k" > { { v} } /option> /select> `,} );
吾辈使用的代码看起来代码貌似没什么问题?
main id="app"> 当前选择的性别是: { { map.get(sex)} } div> rx-select :map="map" v-model="sex" /> /div> /main>
JavaScript 代码
new Vue({ el: "#app", data: { map: new Map().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: ` select v-model="innerValue"> option v-for="[k,v] in map" :value="k" :key="k" > { { v} } /option> /select> `,} );
使用代码完全一样,然而组件 RxSelect
的代码却多了许多。。。
解决
一种更优雅的方式是使用 computed
计算属性以及其的 get/set
,代码增加的程度还是可以接受的
Vue.component("RxSelect", { model: { prop: "value", event: "change", } , props: { value: [Number, String], map: Map, } , computed: { innerValue: { get() { return this.value; } , set(val) { this.$emit("change", val); } , } , } , template: ` select v-model="innerValue"> option v-for="[k,v] in map" :value="k" :key="k" > { { v} } /option> /select> `,} );
以上就是vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案的详细内容,更多关于vue 使用 v-model 双向绑定父子组件的值的资料请关注其它相关文章!
您可能感兴趣的文章:- vue自定义组件实现v-model双向绑定数据的实例代码
- vue3组件中v-model的使用以及深入讲解
- vue中v-model指令与.sync修饰符的区别详解
- 浅谈vue实现双向事件绑定v-model的原理
- Vue使用v-model封装el-pagination组件的全过程
- vue使用v-model进行跨组件绑定的基本实现方法
- vue 表单输入框不支持focus及blur事件的解决方案
- vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
- Vue表单输入绑定的示例代码
- vue 表单输入格式化中文输入法异常问题
- Vue 表单输入绑定v-model
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
本文地址: https://pptw.com/jishu/594633.html