这篇文章主要介绍了在Vue中使用v-model 双向绑定父子组件时需要注意哪些问题,此处通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考价值,需要的朋友可以参考下:vue是什么软件Vue是一套用于构建用户界面的渐进式jav
这篇文章主要介绍了在Vue中使用v-model 双向绑定父子组件时需要注意哪些问题,此处通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考价值,需要的朋友可以参考下:
Vue是一套用于构建用户界面的渐进式javascript框架,Vue与其它大型框架的区别是,使用Vue可以自底向上逐层应用,其核心库只关注视图层,方便与第三方库和项目整合,且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。
[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 双向绑定父子组件时需要注意哪些问题的内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: 在vue中使用v-model 双向绑定父子组件时需要注意哪些问题
本文链接: https://www.lsjlt.com/news/247583.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-10
2024-05-10
2024-05-10
2024-05-10
2024-05-10
2024-05-10
2024-05-10
2024-05-10
2024-05-10
2024-05-10
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0