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 相关文章推荐
javascript JSON操作入门实例
Apr 16 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
Jul 17 Javascript
ie8模式下click无反应点击option无反应的解决方法
Oct 11 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
Mar 02 Javascript
JS显示日历和天气的方法
Mar 01 Javascript
喜大普奔!jQuery发布 3.0 最终版
Jun 12 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
Feb 05 Javascript
详解vue 项目白屏解决方案
Oct 31 Javascript
原生js实现淘宝放大镜效果
Oct 28 Javascript
js中事件对象和事件委托的介绍
Jan 21 Javascript
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
JavaScript前端面试扁平数据转tree与tree数据扁平化
Jun 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
php5 图片验证码实现代码
2009/12/11 PHP
php序列化函数serialize() 和 unserialize() 与原生函数对比
2015/05/08 PHP
PHP实现文件上传功能实例代码
2017/05/18 PHP
YII2框架中actions的作用与使用方法示例
2020/03/13 PHP
jquery ajax 同步异步的执行 return值不能取得的解决方案
2012/01/08 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
2013/11/19 Javascript
jquery.post用法示例代码
2014/01/03 Javascript
Linux下使用jq友好的打印JSON技巧分享
2014/11/18 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
2016/07/24 Javascript
AngularJS ng-blur 指令详解及简单实例
2016/07/30 Javascript
Web打印解决方案之普通报表打印功能
2016/08/29 Javascript
微信小程序 同步请求授权的详解
2017/08/04 Javascript
jQuery实现html双向绑定功能示例
2017/10/09 jQuery
微信小程序实现获取自己所处位置的经纬度坐标功能示例
2017/11/30 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
2018/06/15 Javascript
Angular Excel 导入与导出的实现代码
2019/04/17 Javascript
json 带斜杠时如何解析的实现
2019/08/12 Javascript
vant实现购物车功能
2020/06/29 Javascript
Vue使用Element实现增删改查+打包的步骤
2020/11/25 Vue.js
[05:06]2017亚洲邀请赛DAC回顾片
2017/04/19 DOTA
python如何修改装饰器中参数
2018/03/20 Python
用python标准库difflib比较两份文件的异同详解
2018/11/16 Python
简单了解Django应用app及分布式路由
2019/07/24 Python
对python中的os.getpid()和os.fork()函数详解
2019/08/08 Python
Python编写单元测试代码实例
2020/09/10 Python
HTML5的标签的代码的简单介绍 HTML5标签的简介
2012/05/28 HTML / CSS
世界汽车零件:World Car Parts
2019/09/04 全球购物
大学生思想汇报范文
2013/12/31 职场文书
公司年会主持词
2014/03/22 职场文书
工作建议书范文
2014/05/13 职场文书
学校班班通实施方案
2014/06/11 职场文书
无犯罪记录证明范本
2014/09/15 职场文书
针对吵架老公保证书
2015/05/08 职场文书
小米11和iphone12哪个值得买?小米11对比iphone12评测
2021/04/21 数码科技
前端JS获取URL参数的4种方法总结
2022/04/05 Javascript
Linux下使用C语言代码搭建一个简单的HTTP服务器
2022/04/13 Servers