vue2.0 实现组件props双向绑定

前言

Vue 2.x相比较Vue 1.x,移除组件的props的双向绑定功能。

单向数据流（官方解释）

prop 是单向绑定的：当父组件的属性变化时，将传导给子组件。每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。如果你这么做了，Vue 会在控制台给出警告。

动态Prop

在模板中，要动态地绑定父组件的数据到子模板的 props，用 v-bind。

<child :my-message="parentMsg"></child>

组件双向绑定(组件内部自己变了告诉外部，外部决定要不要变)

1.因为defRole不可写，所以需要在data中创建一个副本haveRole变量，初始值为props属性defRole的值，同时在组件内所有需要调用props的地方调用这个data对象haveRole。
2.创建针对props属性的watch来同步组件外对props的修改
3.创建针对props副本的watch，通知到组件外