前言
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,通知到组件外