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项目利用axios请求接口下载excel
Nov 17 Vue.js
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 Vue.js
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
Vue接口封装的完整步骤记录
May 14 Vue.js
解决vue $http的get和post请求跨域问题
Jun 07 Vue.js
详解Vue slot插槽
Nov 20 Vue.js
vue中div禁止点击事件的实现
Apr 02 Vue.js
vue实现拖拽交换位置
Apr 07 Vue.js
三种方式清除vue路由跳转router-link的历史记录
Apr 10 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中session_unset与session_destroy的区别分析
2011/06/16 PHP
PHP实现简单搜歌的方法
2015/07/28 PHP
PHP中字符与字节的区别及字符串与字节转换示例
2016/10/15 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
网页里控制图片大小的相关代码
2006/06/13 Javascript
载入进度条 效果
2006/07/08 Javascript
初试jQuery EasyUI 使用介绍
2010/04/01 Javascript
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
2011/10/21 Javascript
Jquery为a标签的href赋值实现代码
2013/05/03 Javascript
js中的屏蔽的使用示例
2013/07/30 Javascript
如何让DIV可编辑、可拖动示例代码
2013/09/18 Javascript
IE下window.onresize 多次调用与死循环bug处理方法介绍
2013/11/12 Javascript
超级简单的jquery操作表格方法
2014/12/15 Javascript
基于Bootstrap的网页设计实例
2017/03/01 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
2017/03/02 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
2017/06/28 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
2018/11/04 Javascript
vue.js 2.0实现简单分页效果
2019/07/29 Javascript
Postman无法正常返回结果问题解决
2020/08/28 Javascript
原生微信小程序开发中 redux 的使用详解
2021/02/18 Javascript
[54:29]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第二场
2018/04/09 DOTA
python机器学习实战之树回归详解
2017/12/20 Python
浅析Python 实现一个自动化翻译和替换的工具
2019/04/14 Python
HTML的form表单和django的form表单
2019/07/25 Python
python的re模块使用方法详解
2019/07/26 Python
Pandas时间序列重采样(resample)方法中closed、label的作用详解
2019/12/10 Python
python变量的作用域是什么
2020/05/26 Python
纯css3实现宠物小鸡实例代码
2018/10/08 HTML / CSS
世界第一冲浪品牌:O’Neill
2016/08/30 全球购物
印尼最大的网上书店:Gramedia.com
2018/09/13 全球购物
365 Tickets英国:全球景点门票
2019/07/06 全球购物
餐厅执行经理岗位职责范本
2014/02/26 职场文书
大学生职业生涯规划书汇总
2014/03/20 职场文书
环境日宣传活动总结
2014/07/09 职场文书
对外汉语专业大学生职业生涯规划书
2014/10/11 职场文书
2015年社区卫生工作总结
2015/04/21 职场文书