详解如何在Vue2中实现组件props双向绑定
前端之家 收集整理的这篇文章主要介绍了
详解如何在Vue2中实现组件props双向绑定 ，
前端之家 小编觉得挺不错的，现在分享给大家，也给大家做个参考。
Vue学习笔记-3 前言
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.不点击按钮，也可以通过外部修改 数据切换开关状态，比如级联联动开关。
代码 大致是类似这样的：
代码
Vue.component("switchbtn",{
template:"
{{result?'开':'关'}}
",props:["result"],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。
{{myResult?'开':'关'}}
",props: ["result"],data: function () {
return {
myResult: this.result//data中新增字段
};
},......
});
2. 创建针对props属性 的watch来同步组件外对props的修改
此时在组件外（父组件）修改 了组件的props，会同步到组件内对应的props上，但是不会同步到你刚刚在data对象中创建的那个副本上，所以需要再创建一个针对props属性 result的watch（监听），当props修改 后对应data中的副本myResult也要同步数据。
3. 创建针对props副本的watch，通知 到组件外
此时在组件内修改 了props的副本myResult，组件外不知道组件内的props状态，所以需要再创建一个针对props副本myResult，即对应data属性 的watch。
在组件内向外层（父组件）发送通知 ，通知 组件内属性 变更，然后由外层（父组件）自己来变更他的数据
最终全部代码 ：
属性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({调用 组件方注册 变更方法 ，将组件内的数据变更，同步到组件外的数据状态中
至此，实现了组件内数据与组件外的数据的双向绑定，组件内外数据的同步。最后归结为一句话就是：组件内部自己变了告诉外部，外部决定要不要变。
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不需要创建双向绑定。
例：
文件
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名称 ，修改 后值，修改 前值。可以由当前组件调用 方（父组件）来决定是否要将组件内的变更同步到调用 方
例：
......略属性 变更为" +newVal);
源码下载
Vue的mixin组件propsync代码 ：
以上就是本文的全部内容 ，希望对大家的学习有所帮助，也希望大家多多支持 编程之家。
