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 相关文章推荐
js压缩利器
Feb 20 Javascript
js里的prototype使用示例
Nov 19 Javascript
javascript getElementsByTagName
Jan 31 Javascript
js控制淡入淡出示例代码
Nov 12 Javascript
深入领悟JavaScript中的面向对象
Nov 18 Javascript
JQuery弹出层示例可自定义
May 19 Javascript
Node.js 异步编程之 Callback介绍(一)
Mar 30 Javascript
Vue.js基础知识汇总
Apr 27 Javascript
jQuery简单实现仿京东分类导航层效果
Jun 07 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
Nov 24 Javascript
原生JS和jQuery操作DOM对比总结
Jan 19 Javascript
Vue 表单控件绑定的实现示例
Aug 11 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
多文件上载系统完整版
2006/10/09 PHP
编写安全 PHP应用程序的七个习惯深入分析
2013/06/08 PHP
php下foreach提示Warning:Invalid argument supplied for foreach()的解决方法
2014/11/11 PHP
jQuery过滤选择器详解
2015/01/13 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
2015/09/15 Javascript
JavaScript ParseFloat()方法
2015/12/18 Javascript
Javascript 动态改变imput type属性
2016/11/01 Javascript
Move.js入门
2017/02/08 Javascript
浅析Angular2子模块以及异步加载
2017/04/24 Javascript
JavaScript之Date_动力节点Java学院整理
2017/06/28 Javascript
node.js中fs文件系统目录操作与文件信息操作
2018/02/24 Javascript
Vue 动态设置路由参数的案例分析
2018/04/24 Javascript
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
2018/09/14 Javascript
JavaScript根据json生成html表格的示例代码
2018/10/24 Javascript
vue-router启用history模式下的开发及非根目录部署方法
2018/12/23 Javascript
validform表单验证的实现方法
2019/03/08 Javascript
史上最为详细的javascript继承(推荐)
2019/05/18 Javascript
node中实现删除目录的几种方法
2019/06/24 Javascript
python读写ini配置文件方法实例分析
2015/06/30 Python
Python连接mysql数据库的正确姿势
2016/02/03 Python
Python爬虫框架Scrapy常用命令总结
2018/07/26 Python
基于numpy中数组元素的切片复制方法
2018/11/15 Python
解决Pandas的DataFrame输出截断和省略的问题
2019/02/08 Python
python用match()函数爬数据方法详解
2019/07/23 Python
tensorflow 利用expand_dims和squeeze扩展和压缩tensor维度方式
2020/02/07 Python
利用python中集合的唯一性实现去重
2020/02/11 Python
python打印文件的前几行或最后几行教程
2020/02/13 Python
python实现批量修改文件名
2020/03/23 Python
如何利用Python 进行边缘检测
2020/10/14 Python
css3新增颜色表示方式分享
2014/04/15 HTML / CSS
全球最大的在线旅游公司:Expedia
2017/11/16 全球购物
路政管理毕业自荐书范文
2014/02/10 职场文书
《狮子和兔子》教学反思
2014/03/02 职场文书
小学节能减排倡议书
2014/05/15 职场文书
正确使用MySQL update语句
2021/05/26 MySQL
Matplotlib可视化之添加让统计图变得简单易懂的注释
2021/06/11 Python