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


Posted in Vue.js onMarch 01, 2021

场景

今天在使用 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: "",
 },
});

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

尝试解决

吾辈找到一种方式

  1. 为需要双向绑定的变量在组件内部 data 声明一个变量 innerValue,并初始化为 value
  2. select 上使用 v-model绑定这个变量 innerValue
  3. 监听 value 的变化,在父组件中 value 变化时修改 innerValue 的值
  4. 监听 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.js 相关文章推荐
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
vue中activated的用法
Jan 03 Vue.js
vue编写简单的购物车功能
Jan 08 Vue.js
vue 递归组件的简单使用示例
Jan 14 Vue.js
vue使用过滤器格式化日期
Jan 20 Vue.js
Vue ​v-model相关知识总结
Jan 28 Vue.js
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
SSM VUE Axios详解
Oct 05 Vue.js
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
vue实现书本翻页动画效果实例详解
Apr 08 Vue.js
vue修饰符.capture和.self的区别
Apr 22 Vue.js
vue elementUI批量上传文件
Apr 26 Vue.js
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 #Vue.js
vue-router路由懒加载及实现的3种方式
Feb 28 #Vue.js
vue-router懒加载的3种方式汇总
Feb 28 #Vue.js
Vue SPA 首屏优化方案
Feb 26 #Vue.js
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 #Vue.js
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 #Vue.js
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 #Vue.js
You might like
PHP实现利用MySQL保存session的方法
2014/08/23 PHP
PHP实现通过Luhn算法校验信用卡卡号是否有效
2015/03/23 PHP
laravel框架数据库配置及操作数据库示例
2019/10/10 PHP
JS查看对象功能代码
2008/04/25 Javascript
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
2010/06/11 Javascript
简单实例处理url特殊符号&amp;处理(2种方法)
2013/04/02 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
2016/06/09 Javascript
JavaScript组合模式学习要点
2016/08/26 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
2017/01/11 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
2017/02/21 Javascript
详解微信小程序中的页面代码中的模板的封装
2017/10/12 Javascript
Express的HTTP重定向到HTTPS的方法
2018/06/06 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
2019/11/01 Javascript
JavaScript实现轮播图片完整代码
2020/03/07 Javascript
[01:46]TI4西雅图DOTA2前线报道 中国选手抱团调时差
2014/07/08 DOTA
[02:09]2018DOTA2亚洲邀请赛TNC赛前采访
2018/04/04 DOTA
python网络编程学习笔记(八):XML生成与解析(DOM、ElementTree)
2014/06/09 Python
简介Python设计模式中的代理模式与模板方法模式编程
2016/02/02 Python
pygame游戏之旅 如何制作游戏障碍
2018/11/20 Python
python实现可变变量名方法详解
2019/07/01 Python
python Opencv计算图像相似度过程解析
2019/12/03 Python
Pytorch中Tensor与各种图像格式的相互转化详解
2019/12/26 Python
Python sqlite3查询操作过程解析
2020/02/20 Python
css3 box-sizing属性使用参考指南
2013/01/08 HTML / CSS
详解FireFox下Canvas使用图像合成绘制SVG的Bug
2019/07/10 HTML / CSS
英国精品买手店:Browns Fashion
2016/09/29 全球购物
佳能英国官方网站:Canon UK
2017/08/08 全球购物
李宁官方网店:中国运动品牌
2017/11/02 全球购物
英国复古服装购物网站:Collectif
2019/10/30 全球购物
初一学生评语大全
2014/04/24 职场文书
公司活动总结范文
2014/07/01 职场文书
音乐学专业求职信
2014/07/22 职场文书
满月酒邀请函
2015/01/30 职场文书
2015年教师党员自我评价材料
2015/03/04 职场文书
python 进阶学习之python装饰器小结
2021/09/04 Python
什么是动态刷新率DRR? Windows11动态刷新率功能介绍
2021/11/21 数码科技