Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案


Posted in Javascript onMarch 13, 2017

在项目中开始使用vue2来构建项目了,跟 vue1 很大的一处不同在于2 取消了props 的双向绑定,改成只能从父级传到子级的单向数据流,初衷当然是好的,为了避免双向绑定在项目中容易造成的数据混乱。

解决方案一

然后开始参考网上和github上的方案等等,发现很多解决方案是这样的

  1. 用data对象中创建一个props属性的副本
  2. watch props属性 赋予data副本 来同步组件外对props的修改
  3. watch data副本,emit一个函数 通知到组件外

这里以最常见的 modal为例子:modal挺合适双向绑定的,外部可以控制组件的 显示或者隐藏,组件内部的关闭可以控制 visible属性隐藏,同时visible 属性同步传输到外部

///modal.vue 组件
<template>
 <div class="modal" v-show="visible">
  <div class="close" @click="cancel">X</div>
 </div>
</template>

<script>
export default {
 name:'modal',
 props: {
  value: {
  type: Boolean,
  default:false
  }
 },

 data () {
 return {
  visible:false
 }
 },
 watch:{
  value(val) {
  console.log(val);
  this.visible = val;
  },
  visible(val) {
  this.$emit("visible-change",val);
  }
 },
 methods:{
 cancel(){
  this.visible = false;
 }
 },
 mounted() {
 if (this.value) {
  this.visible = true;
 }
 }
}
</script>


///调用modal组件
<modal :value="isShow" @visible-change="modalVisibleChange"></modal>

export default {
 name: 'app',
 data () {
 return {
  isShow:true,
 }
 },
 methods:{
  modalVisibleChange(val){
  this.isShow = val;
  }
 }
}

这样就解决了 组件props 双向绑定的问题。 但是这样有一个不是太美观的现象就是 在父级调用 modal组件的时候,还需要写一个 modalVisibleChange 的methods. 总是显得这部分代码是多余的。 特别是写一个让别人用的公共组件,这样调用太麻烦了。能不能不写method来实现props的双向绑定呢,答案是可以的。

优美解决方案

那就是利用 v-model, 在组件内部放置一个 隐藏的input 控件来保存v-model的值,进行双向绑定

改成如下代码:

<template>
 <div class="modal" v-show="visible">
  <div class="close" @click="cancel">X</div>
  <input type="text" :value="value" style='display:none;'>
 </div>
</template>

<script>
export default {
 props: {
  value: {
  type: Boolean,
  default:false
  }
 },

 data () {
 return {
  visible:false
 }
 },
 watch:{
  value(val) {
  console.log(val);
  this.visible = val;
  },
  visible(val) {
  this.$emit('input', val);
  }
 },
 methods:{
 cancel(){
  this.visible = false;
 }
 },
 mounted() {
 if (this.value) {
  this.visible = true;
 }
 }
}
</script>


///调用modal组件

 <modal v-model="isShow"></modal>

export default {
 name: 'app',
 data () {
 return {
  isShow:false
 }
 }
}
</script>

这样调用组件的代码是不是很简洁,其他人员要调用的话,会很轻松,只要设置 isShow 就可以控制 modal 组件的显示或者隐藏,同时 如果是modal 组件内部关闭按钮关闭的,状态也会传到 isShow。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
Jul 24 Javascript
jQuery学习笔记[1] jQuery中的DOM操作
Dec 03 Javascript
javascript中的parseInt和parseFloat区别
Jul 12 Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
Nov 23 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
Mar 25 Javascript
JavaScript处理解析JSON数据过程详解
Sep 11 Javascript
获取jqGrid中选择的行的数据
Nov 30 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
Sep 21 Javascript
Javascript中的this,bind和that使用实例
Dec 05 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
Jan 26 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
Feb 10 Javascript
浅谈JSON5解决了JSON的两大痛点
Dec 14 Javascript
jquery实现表单获取短信验证码代码
Mar 13 #Javascript
基于vue2.0+vuex的日期选择组件功能实现
Mar 13 #Javascript
VUE实现日历组件功能
Mar 13 #Javascript
JS正则表达式判断有效数实例代码
Mar 13 #Javascript
又一款MVVM组件 构建自己的Vue组件(2)
Mar 13 #Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
Mar 13 #Javascript
干货!教大家如何选择Vue和React
Mar 13 #Javascript
You might like
在任意字符集下正常显示网页的方法二(续)
2007/04/01 PHP
[原创]php简单隔行变色功能实现代码
2016/07/09 PHP
浅谈Coreseek、Sphinx-for-chinaese、Sphinx+Scws的区别
2016/12/15 PHP
判断是否输入完毕再激活提交按钮
2006/06/26 Javascript
表单提交验证类
2006/07/14 Javascript
javascript 面向对象编程基础:封装
2009/08/21 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
2014/09/03 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
2015/05/16 Javascript
在JavaScript中处理时间之getHours()方法的使用
2015/06/10 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
2015/12/30 Javascript
jQuery的实例及必知重要的jQuery选择器详解
2016/05/20 Javascript
Vue.js路由组件vue-router使用方法详解
2016/12/02 Javascript
js经验分享 JavaScript反调试技巧
2018/03/10 Javascript
详解在React里使用&quot;Vuex&quot;
2018/04/02 Javascript
vue.js+element-ui动态配置菜单的实例
2018/09/07 Javascript
小程序分页实践之编写可复用分页组件
2019/07/18 Javascript
Angular8 简单表单验证的实现示例
2020/06/03 Javascript
[01:12]DOTA2 2015年秋季互动指南
2015/11/10 DOTA
[01:09:13]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第三场 1月19日
2021/03/11 DOTA
在Python中使用cookielib和urllib2配合PyQuery抓取网页信息
2015/04/25 Python
基于asyncio 异步协程框架实现收集B站直播弹幕
2016/09/11 Python
Python使用微信SDK实现的微信支付功能示例
2017/06/30 Python
django+tornado实现实时查看远程日志的方法
2019/08/12 Python
Python 如何实现访问者模式
2020/07/28 Python
利用html5 canvas动态画饼状图的示例代码
2018/04/02 HTML / CSS
浅谈利用缓存来优化HTML5 Canvas程序的性能
2015/05/12 HTML / CSS
Reformation官网:美国女装品牌
2018/09/14 全球购物
清洁工岗位职责
2014/01/29 职场文书
企业消防安全制度
2014/02/02 职场文书
餐饮收银员岗位职责
2014/02/07 职场文书
协议书模板
2014/04/23 职场文书
单位消防安全责任书
2014/07/23 职场文书
义诊活动通知
2015/04/24 职场文书
领导干部失职检讨书
2015/05/05 职场文书
中学生社会实践教育活动总结
2015/05/06 职场文书
导游词之吉林花园山
2019/10/17 职场文书