vue 子组件修改父组件变量问题

 

　　昨天遇到一个这样的场景， 主页面引用了一个子页面，子页面有个Redio选择，2个选项。

　　默认的，会从父组件传递一个参数给子组件作为默认值，实现默认选中效果，以及用来做反选。

　　开始没什么问题，页面都摆上去了，但是当我点击进行选择的时候，console控制器抛出异常了，提示我不能在子组件里修改父组件传递过来的值。

　　网上查证了一番，原因是父组件往子组件传值默认是单向绑定的，不允许在子组件修改值。

　　...

　　网上有些答案， 不过有点坑，最后还是问的公司的前端解决了，做法是这样的：

　　在子组件定义watch方法，监听父组件传递的变量的值，然后把值赋值给子组件内部自己定义的变量即可，如图：

　　

　　watch里面的事件名称即父组件传递的变量名，参数val是变量的值，具体用法如图所示。

　　这样就很好的解决了子组件会修改父组件值的问题。