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 （）
但是在我们平时使用过程中又确实有props双向绑定的需求，个人认为只有在满足以下条件时再使用双向绑定的props。
组件内部需要修改props。
组件需要可以由外部在运行时动态控制，而非单纯初始化。
组件外部需要读取组件内的状态来进行处理
满足上述条件的有比如本例中的switch开关组件，需要外部控制开关状态；再比如Tab多标签页组件的activeIndex属性，需要可以由外部控制标签页当前打开哪一页等等
自动化的props双向绑定处理
Vue的mixin组件——propsync
通过上例也可以看出在Vue2.0中实现props的双向绑定很麻烦，如果有两个props需要做双向绑定上面的代码就要实现两遍，代码极其冗余。
所以我写了一个mixin来自动化处理props的双向绑定的需求——propsync。
主要功能
实现了在组件内自动创建所有prop对应的data属性，方便组件内修改prop使用。解决了vue2.0中不允许组件内直接修改prop的设计。
实现了组件外修改组件prop，组件内自动同步修改到data属性。
实现了组件内修改了data属性（由prop创建的），自动向组件外发出事件通知有内部prop修改。由组件外决定是否要将修改同步到组件外
propsync的使用方法
编写组件
对于编写组件时，如果需要props双向绑定，则直接引入mixin，并在配置中声明mixin即可： mixins: [propsync]
此mixin会根据prop的名称生成对应的data属性名，默认为在prop属性名前面增加"p_"，即若prop中有字段名为active，则自动生成名为p_active的data字段（props到data的名称变更方法可自行修改，详见propsync源码开头配置）
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 } } }
调用组件
引入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); } } }
源码下载