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

Vue 2.x相比较Vue 1.x而言，升级变化除了实现了Virtual-Dom之外，给使用者最大不适就是移除的组件的props的双向绑定功能。
以往在Vue1.x中利用props的twoWay和.sync绑定修饰符就能够实现props的双向绑定功能，可是在Vue2中完全废弃了此功能，若是须要双向绑定须要本身来实现。

Vue2的组件props通讯方式

在Vue2中组件的props的数据流动改成了只能单向流动，即只能由组件外（调用组件方）经过组件的DOM属性attribute传递props给组件内，组件内只能被动接收组件外传递过来的数据，而且在组件内，不能修改由外层传来的props数据。



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

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

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

案例

假设我要作一个iOS风格的开关按钮，需求就只有两个：

1. 点击按钮实现 开/关 状态切换
2. 不点击按钮，也能够经过外部修改数据切换开关状态，好比级联联动开关。



代码大体是相似这样的：

<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;//④外层调用组件方注册变动方法，将组件内的数据变动，同步到组件外的数据状态中 } } });

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



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); } } }