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实现坐标拾取器功能示例
Nov 18 Vue.js
vue实现滚动鼠标滚轮切换页面
Dec 13 Vue.js
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
基于vue的video播放器的实现示例
Feb 19 Vue.js
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
如何让vue长列表快速加载
Mar 29 Vue.js
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 Vue.js
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 Vue.js
vue3不同环境下实现配置代理
May 25 Vue.js
Vue Mint UI mt-swipe的使用方式
Jun 05 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
《星际争霸2》终章已出 RTS时代宣告终结
2017/02/07 星际争霸
PHP下用rmdir实现删除目录的三种方法小结
2008/04/20 PHP
PHP 定界符 使用技巧
2009/06/14 PHP
ThinkPHP字符串函数及常用函数汇总
2014/07/18 PHP
分享常见的几种页面静态化的方法
2015/01/08 PHP
php中JSON的使用与转换
2015/01/14 PHP
Laravel中使用自己编写类库的3种方法
2015/02/10 PHP
PHP中addslashes与mysql_escape_string的区别分析
2016/04/25 PHP
使用PHP下载CSS文件中的所有图片【几行代码即可实现】
2016/12/14 PHP
学习ExtJS(二) Button常用方法
2009/10/07 Javascript
jQuery autocomplate 自扩展插件、自动完成示例代码
2011/03/28 Javascript
Js 获取Gridview选中行的内容操作步骤
2013/02/05 Javascript
JavaScript原型链示例分享
2014/01/26 Javascript
纯js代码实现简单计算器
2015/12/02 Javascript
浅谈JavaScript 覆盖原型以及更改原型
2016/08/31 Javascript
svg动画之动态描边效果
2017/02/22 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
2017/05/28 Javascript
webpack优化的深入理解
2018/12/10 Javascript
记一次vue-webpack项目优化实践详解
2019/02/17 Javascript
vue-cli脚手架的.babelrc文件用法说明
2020/09/11 Javascript
Python解析json文件相关知识学习
2016/03/01 Python
基于python元祖与字典与集合的粗浅认识
2017/08/23 Python
Python3多线程操作简单示例
2018/05/22 Python
python-opencv颜色提取分割方法
2018/12/08 Python
HTML5 移动页面自适应手机屏幕四类方法总结
2017/08/17 HTML / CSS
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
2018/01/10 HTML / CSS
在线吉他课程,学习如何弹吉他:Fender Play
2019/02/28 全球购物
八年级数学教学反思
2014/01/31 职场文书
协议书怎么写
2014/04/21 职场文书
公司离职证明范本(汇总)
2014/09/10 职场文书
奉献家乡演讲稿
2014/09/13 职场文书
班主任先进事迹材料
2014/12/17 职场文书
高三复习计划
2015/01/19 职场文书
详解pytorch创建tensor函数
2022/03/22 Python
Python中的socket网络模块介绍
2022/07/23 Python
JavaScript圣杯布局与双飞翼布局实现案例详解
2022/08/05 Javascript