vue父子组件实现双向绑定实例

Vue2的组件props通信方式

Vue2中组件props的数据流动改变只能单向流动，即只能由组件外通过DOM属性attribute传递props给组件内，组件只能被动接收组件外传递过来的数据，并且在组件内，不能修改由外层传来的props数据。

否则：会报这个错误：
[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呢？

刚好今天写了一个：
父组件是一个身份验证的弹窗：

图片.png

这里通过绑定showAuthen给子组件传值，然后通过事件on-result-change动态改变父组件showAuthen的值。
子组件代码：

图片.png

首先接收父组件showAuthen的值；
然后通过第三方变量获取这个值：

图片.png

通过watch监控这个值得变化动态传值：

图片.png

通过一个时间来把这个值传递出去（父组件），
这里通过watch监测 showexplain的变化实现，
也可以在时间里直接将值通过emit传递给父元素：
通过事件改变showexplain的值：

图片.png

监测这个值得变化：

图片.png

然后父组件绑定on-result-change事件：

图片.png

这样子就完成了。。。

PS:复杂双向绑定数据建议使用vuex