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 26 Vue.js
vue+element实现动态加载表单
Dec 13 Vue.js
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
Vue如何实现组件间通信
May 15 Vue.js
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 Vue.js
Vue h函数的使用详解
Feb 18 Vue.js
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
vue实现拖拽交换位置
Apr 07 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
丧钟首部独立剧集《丧钟:骑士与龙》北美正式开播,场面血腥
2020/04/09 欧美动漫
phpMyAdmin 安装教程全攻略
2007/03/19 PHP
PHP错误抑制符(@)导致引用传参失败Bug的分析
2011/05/02 PHP
详解Laravel视图间共享数据与视图Composer
2016/08/04 PHP
php自定义函数转换html标签示例
2016/09/29 PHP
js获取url参数的使用扩展实例
2007/12/29 Javascript
ExtJS 2.2.1的grid控件在ie6中的显示问题
2009/05/04 Javascript
防止页面被iframe(兼容IE,Firefox火狐)
2010/07/04 Javascript
js+数组实现网页上显示时间/星期几的实用方法
2013/01/18 Javascript
删除select中所有option选项jquery代码
2013/08/12 Javascript
父元素与子iframe相互获取变量和元素对象的具体实现
2013/10/15 Javascript
jQuery学习笔记之jQuery中的$
2015/01/19 Javascript
Javascript中call和apply函数的比较和使用实例
2015/02/03 Javascript
javascript制作sql转换为stringBuffer的小工具
2015/04/03 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
2015/07/27 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
2016/03/10 Javascript
JS简单验证上传文件类型的方法
2017/04/17 Javascript
详解vue-router 2.0 常用基础知识点之router-link
2017/05/10 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
2017/05/17 Javascript
jQuery实现的form转json经典示例
2017/10/10 jQuery
微信小程序下拉菜单效果的实例代码
2019/05/14 Javascript
在layui下对元素进行事件绑定的实例
2019/09/06 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
2020/01/21 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
2020/07/28 Javascript
Python中最常用的操作列表的几种方法归纳
2015/04/24 Python
Python实现简易过滤删除数字的方法小结
2019/01/09 Python
Python Pandas 如何shuffle(打乱)数据
2019/07/30 Python
pytorch打印网络结构的实例
2019/08/19 Python
python实现的按要求生成手机号功能示例
2019/10/08 Python
CSS3制作翻转效果_动力节点Java学院整理
2017/07/11 HTML / CSS
美国领先的家庭智能音响系统品牌:Sonos
2018/07/20 全球购物
意大利在线高尔夫商店:Online Golf
2021/03/09 全球购物
"序列点" 是什么
2016/07/29 面试题
求职毕业生自荐书
2014/02/08 职场文书
普希金的诗歌赏析(3首)
2019/08/20 职场文书
KVM基础命令详解
2022/04/30 Servers