详解如何在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复制到剪贴板示例代码
Oct 30 Javascript
解析JavaScript中delete操作符不能删除的对象
Dec 03 Javascript
javascript为下拉列表动态添加数据项
May 23 Javascript
JS是按值传递还是按引用传递
Jan 30 Javascript
基于javascript制作经典传统的拼图游戏
Mar 22 Javascript
微信小程序 同步请求授权的详解
Aug 04 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
Sep 02 Javascript
Node.js操作系统OS模块用法分析
Jan 04 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
Feb 20 Javascript
JavaScript this在函数中的指向及实例详解
Oct 14 Javascript
p5.js实现动态图形临摹
Oct 23 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
Nov 06 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
《魔兽争霸3》重制版究竟重制了什么?玩家:这么糊弄真的好吗?
2020/05/04 魔兽争霸
用PHP制作静态网站的模板框架(二)
2006/10/09 PHP
PHP parse_url 一个好用的函数
2009/10/03 PHP
Laravel监听数据库访问,打印SQL的例子
2019/10/24 PHP
PHP序列化和反序列化深度剖析实例讲解
2020/12/29 PHP
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
2007/09/04 Javascript
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
2009/06/04 Javascript
uploadify 3.0 详细使用说明
2012/06/18 Javascript
JS 作用域与作用域链详解
2015/04/07 Javascript
javascript表单验证大全
2015/08/12 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
2015/12/04 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
2016/01/13 Javascript
Vue.js Ajax动态参数与列表显示实现方法
2016/10/20 Javascript
JavaScript奇技淫巧44招【实用】
2016/12/11 Javascript
详解vue移动端项目的适配(以mint-ui为例)
2018/08/17 Javascript
JS中async/await实现异步调用的方法
2019/08/28 Javascript
Python实现的石头剪子布代码分享
2014/08/22 Python
CentOS中使用virtualenv搭建python3环境
2015/06/08 Python
浅谈python 四种数值类型(int,long,float,complex)
2016/06/08 Python
Python 备份程序代码实现
2017/03/06 Python
NumPy 数组使用大全
2019/04/25 Python
Python:Numpy 求平均向量的实例
2019/06/29 Python
Python大数据之从网页上爬取数据的方法详解
2019/11/16 Python
python3 webp转gif格式的实现示例
2019/12/10 Python
HTML5中的Scoped属性使用实例
2014/04/23 HTML / CSS
Myprotein加拿大官网:欧洲第一的运动营养品牌
2018/01/06 全球购物
世界汽车零件:World Car Parts
2019/09/04 全球购物
简述DNS进行域名解析的过程
2013/12/02 面试题
高中自我鉴定范文
2013/11/03 职场文书
公司请假条范文
2014/04/11 职场文书
《鸿门宴》教学反思
2014/04/22 职场文书
大学生就业协议书范本(适用于公司企业)
2014/10/07 职场文书
2014年工程工作总结
2014/11/25 职场文书
2015年大学组织委员个人工作总结
2015/10/23 职场文书
Apache Calcite 实现方言转换的代码
2021/04/24 Servers
Nginx配置之实现多台服务器负载均衡
2021/08/02 Servers