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风格的开关按钮，需求就只有两个：
点击按钮实现 开/关 状态切换
不点击按钮，也可以通过外部修改数据切换开关状态，比如级联联动开关。
代码大致是类似这样的：
<div> <!--开关组件--> <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> <switchbtn :result="result" @on-result-change="onResultChange"></switchbtn> <input type="button" value="change" @click="change"> </div>