详解如何在Vue2中实现组件props双向绑定


Posted in Javascript onMarch 29, 2017

Vue学习笔记-3 前言

Vue 2.x相比较Vue 1.x而言,升级变化除了实现了Virtual-Dom以外,给使用者最大不适就是移除的组件的props的双向绑定功能。

以往在Vue1.x中利用propstwoWay.sync绑定修饰符就可以实现props的双向绑定功能,但是在Vue2中彻底废弃了此功能,如果需要双向绑定需要自己来实现。

Vue2的组件props通信方式

在Vue2中组件的props的数据流动改为了只能单向流动,即只能由组件外(调用组件方)通过组件的DOM属性attribute传递props给组件内,组件内只能被动接收组件外传递过来的数据,并且在组件内,不能修改由外层传来的props数据。

详解如何在Vue2中实现组件props双向绑定 

关于这一点的修改官方给的解释:

prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。

虽然废弃了props的双向绑定对于整个项目整体而言是有利且正确的,但是在某些时候我们确实需要从组件内部修改props的需求

案例

假设我要做一个iOS风格的开关按钮,需求就只有两个:

1.点击按钮实现 开/关 状态切换

2.不点击按钮,也可以通过外部修改数据切换开关状态,比如级联联动开关。

详解如何在Vue2中实现组件props双向绑定 

代码大致是类似这样的:

<div id="app">
  <!--开关组件-->
  <switchbtn :result="result"></switchbtn>
  <!--外部控制-->
  <input type="button" value="change" @click="change">
</div>
//开关组件代码
Vue.component("switchbtn",{
  template:"<div @click='change'>{{result?'开':'关'}}</div>",
  props:["result"],
  methods:{
    change(){
      this.result=!this.result;
    }
  }
});

//调用组件
new Vue({
  el: "#app",
  data:{
    result:true//开关状态数据
  },
  methods:{
    change(){
      this.result=!this.result;
    }
  }
});

但是在vue2.0中上面的代码在点击开关时会报错:

[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: "result" (found in component )

组件内不能修改props的值,同时修改的值也不会同步到组件外层,即调用组件方不知道组件内部当前的状态是什么

在Vue2.0中,实现组件属性的双向绑定方式

1. 在组件内的data对象中创建一个props属性的副本

因为result不可写,所以需要在data中创建一个副本myResult变量,初始值为props属性result的值,同时在组件内所有需要调用props的地方调用这个data对象myResult

Vue.component("switchbtn", {
  template: "<div @click='change'>{{myResult?'开':'关'}}</div>",
  props: ["result"],
  data: function () {
    return {
      myResult: this.result//data中新增字段
    };
  },
  ......
});

2. 创建针对props属性的watch来同步组件外对props的修改

此时在组件外(父组件)修改了组件的props,会同步到组件内对应的props上,但是不会同步到你刚刚在data对象中创建的那个副本上,所以需要再创建一个针对props属性result的watch(监听),当props修改后对应data中的副本myResult也要同步数据。

Vue.component("switchbtn", {
  template: "<div @click='change'>{{myResult?'开':'关'}}</div>",
  props: ["result"],
  data: function () {
    return {
      myResult: this.result
    };
  },
  watch: {
    result(val) {
      this.myResult = val;//新增result的watch,监听变更并同步到myResult上
    }
  },
  ......

3. 创建针对props副本的watch,通知到组件外

此时在组件内修改了props的副本myResult,组件外不知道组件内的props状态,所以需要再创建一个针对props副本myResult,即对应data属性的watch。

在组件内向外层(父组件)发送通知,通知组件内属性变更,然后由外层(父组件)自己来变更他的数据

最终全部代码:

<div id="app">
  <switchbtn :result="result" @on-result-change="onResultChange"></switchbtn>
  <input type="button" value="change" @click="change">
</div>
Vue.component("switchbtn", {
  template: "<div @click='change'>{{myResult?'开':'关'}}</div>",
  props: ["result"],
  data: function () {
    return {
      myResult: this.result//①创建props属性result的副本--myResult
    };
  },
  watch: {
    result(val) {
      this.myResult = val;//②监听外部对props属性result的变更,并同步到组件内的data属性myResult中
    },
    myResult(val){
      //xxcanghai 小小沧海 博客园
      this.$emit("on-result-change",val);//③组件内对myResult变更后向外部发送事件通知
    }
  },
  methods: {
    change() {
      this.myResult = !this.myResult;
    }
  }
});

new Vue({
  el: "#app",
  data: {
    result: true
  },
  methods: {
    change() {
      this.result = !this.result;
    },
    onResultChange(val){
      this.result=val;//④外层调用组件方注册变更方法,将组件内的数据变更,同步到组件外的数据状态中
    }
  }
});

至此,实现了组件内数据与组件外的数据的双向绑定,组件内外数据的同步。最后归结为一句话就是:组件内部自己变了告诉外部,外部决定要不要变。

详解如何在Vue2中实现组件props双向绑定 

4. 什么样的props适合做双向绑定?

首先要声明的是双向绑定的props肯定是不利于组件间的数据状态管理,尤其是在复杂的业务中更是如此,所以要尽可能的少用双向绑定,过于复杂的数据处理建议使用Vuex (http://vuex.vuejs.org/zh-cn/intro.html)

但是在我们平时使用过程中又确实有props双向绑定的需求,个人认为只有在满足以下条件时再使用双向绑定的props。

1.组件内部需要修改props。

2.组件需要可以由外部在运行时动态控制,而非单纯初始化。

3.组件外部需要读取组件内的状态来进行处理

满足上述条件的有比如本例中的switch开关组件,需要外部控制开关状态;再比如Tab多标签页组件的activeIndex属性,需要可以由外部控制标签页当前打开哪一页等等

自动化的props双向绑定处理

Vue的mixin组件——propsync

通过上例也可以看出在Vue2.0中实现props的双向绑定很麻烦,如果有两个props需要做双向绑定上面的代码就要实现两遍,代码极其冗余。

 所以我写了一个mixin来自动化处理props的双向绑定的需求——propsync

主要功能

1.实现了在组件内自动创建所有prop对应的data属性,方便组件内修改prop使用。解决了vue2.0中不允许组件内直接修改prop的设计。

2.实现了组件外修改组件prop,组件内自动同步修改到data属性。

3.实现了组件内修改了data属性(由prop创建的),自动向组件外发出事件通知有内部prop修改。由组件外决定是否要将修改同步到组件外

propsync的使用方法

编写组件

1.对于编写组件时,如果需要props双向绑定,则直接引入mixin,并在配置中声明mixin即可: mixins: [propsync]

2.此mixin会根据prop的名称生成对应的data属性名,默认为在prop属性名前面增加"p_",即若prop中有字段名为active,则自动生成名为p_active的data字段(props到data的名称变更方法可自行修改,详见propsync源码开头配置)

3.propsync默认会将所有props创建双向绑定,可通过propsync:false来声明此props不需要创建双向绑定。

例:

import propsync from './mixins/propsync';//引入mixin文件
export default {
 name: "tab",
 mixins: [propsync],//声明使用propsync的mixin
 props: {
  active: {
   type: [String, Number],//会被propsync自动实现双向绑定,在data中创建p_active变量
  },
  width: {
   type: [Number, String],
   propsync:false//不会被propsync实现双向绑定
  }
 },
 methods: {
  setActive(page, index, e) {
   this.p_active = index;//可以直接使用this.p_active
  }
 }
}

调用组件

1.引入propsync后,会在内部双向绑定的data变更后触发一个onPropsChange事件。遂在调用组件处,增加一个事件监听 onPropsChange(可修改),当组件内修改了props时propsync会触发此事件,返回参与依次为:修改prop名称,修改后值,修改前值。可以由当前组件调用方(父组件)来决定是否要将组件内的变更同步到调用方

例:

<tab :active="active" @onPropsChange="change"></tab>
 
......略
{
 data:{
  active:0
 },
 methods:{
  change:function(propName,newVal,oldVal){
   this[propName]=newVal;
   console.log("组件tab的" +propName+ "属性变更为" +newVal);
  } 
 }
}

源码下载

Vue的mixin组件propsync代码:vue_3water.rar

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

Javascript 相关文章推荐
JS面向对象编程 for Cookie
Sep 19 Javascript
Array 重排序方法和操作方法的简单实例
Jan 24 Javascript
node.js中的fs.fchownSync方法使用说明
Dec 16 Javascript
jQuery中Ajax的load方法详解
Jan 14 Javascript
JavaScript中的this,call,apply使用及区别详解
Jan 29 Javascript
JS判断浏览器是否安装flash插件的简单方法
Sep 13 Javascript
解决iview打包时UglifyJs报错的问题
Mar 07 Javascript
MVVM 双向绑定的实现代码
Jun 21 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
vue中引入第三方字体文件的方法示例
Dec 17 Javascript
element-ui上传一张图片后隐藏上传按钮功能
May 22 Javascript
uni-app使用countdown插件实现倒计时
Nov 01 Javascript
整理关于Bootstrap警示框的慕课笔记
Mar 29 #Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
Mar 29 #Javascript
jQuery实现字体颜色渐变效果的方法
Mar 29 #jQuery
整理关于Bootstrap导航的慕课笔记
Mar 29 #Javascript
javascript 中Cookie读、写与删除操作
Mar 29 #Javascript
移动端利用H5实现压缩图片上传功能
Mar 29 #Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
Mar 29 #Javascript
You might like
社区(php&amp;&amp;mysql)四
2006/10/09 PHP
PHP+MYSQL实现读写分离简单实战
2017/03/13 PHP
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
2007/05/30 Javascript
最简单的jQuery程序 入门者学习
2009/07/09 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
2013/03/18 Javascript
jquery自定义类似$.ajax()的方法实现代码
2013/08/13 Javascript
javascript获得网页窗口实际大小的示例代码
2013/09/21 Javascript
浅谈javascript对象模型和function对象
2014/12/26 Javascript
使用jquery给指定的table动态添加一行、删除一行
2016/10/13 Javascript
Vue过滤器的用法和自定义过滤器使用
2017/02/08 Javascript
详解js静态检查工具eslint配置文件
2018/11/23 Javascript
Three.js实现简单3D房间布局
2018/12/30 Javascript
JS实现简易图片自动轮播
2020/10/16 Javascript
[01:10]DOTA2次级职业联赛 - U5战队宣传片
2014/12/01 DOTA
零基础写python爬虫之抓取百度贴吧并存储到本地txt文件改进版
2014/11/06 Python
python中map、any、all函数用法分析
2015/04/21 Python
python检测某个变量是否有定义的方法
2015/05/20 Python
梯度下降法介绍及利用Python实现的方法示例
2017/07/12 Python
Python探索之静态方法和类方法的区别详解
2017/10/27 Python
Python实现矩阵转置的方法分析
2017/11/24 Python
python和shell监控linux服务器的详细代码
2018/06/22 Python
Python+PyQT5的子线程更新UI界面的实例
2019/06/14 Python
django框架实现模板中获取request 的各种信息示例
2019/07/01 Python
Python使用tkinter模块实现推箱子游戏
2019/10/08 Python
解决django接口无法通过ip进行访问的问题
2020/03/27 Python
python安装后的目录在哪里
2020/06/21 Python
keras 两种训练模型方式详解fit和fit_generator(节省内存)
2020/07/03 Python
留学推荐信范文
2014/05/10 职场文书
小学生倡议书范文
2014/05/13 职场文书
植树造林的宣传标语
2014/06/23 职场文书
励志演讲稿大全
2014/08/21 职场文书
幼儿园教师工作总结2015
2015/04/02 职场文书
运动会宣传语
2015/07/13 职场文书
nginx里的rewrite跳转的实现
2021/03/31 Servers
面试被问select......for update会锁表还是锁行
2021/11/11 MySQL
win10+RTX3050ti+TensorFlow+cudn+cudnn配置深度学习环境的方法
2022/06/25 Servers