Vue父子组件通讯

我们知道，父组件不能修改子组件的数据【这种说法是不严谨的】，严谨的说法是：子组件内部不能修改从父组件传递过来的值。原因是vue遵循的是数据单向流原则，父组件传递数据给子组件只能单向绑定，通过Props，子组件通过$emit发射自定义事件传参到父组件，而数据的改变是只能父组件改变父组件的，子组件改变子组件的。

说到底，Props里面的数据其实是父组件的，所以子组件不能私自修改，若修改Vue会报错不让修改。Props里面的数据其实是子组件去获取父组件的数据，子组件无权修改，只有父组件能做修改。

那么：子组件若是想要修改父组件传递过来的Props数据呢？

答：子组件自己不能修改，可以传参给父组件，让父组件自己去做修改即可。

子组件内部定义一个局部变量，用prop初始化，然后定义一个计算属性处理prop的值并返回。

我们知道，各自组件可以修改自己的data属性的参数值，那么，如何在父组件中修改子组件data里面的数据呢？

可以通过在父组件调用子组件：<notice-add ref="notice_add"></notice-add>加上ref属性，这样在父组件里面就可以：

this.$refs.notice_add.dialogFormVisible = true;

在父组件里面这样子操作子组件data里面的参数了，本质其实还是子组件修改内部数据。

 

至此，父组件通过Props传参给子组件，子组件通过$emit事件传参给父组件，也可以在父组件调用子组件事件或者改变子组件data数值，所有改变的情况都已经清楚！

 

【完】

连死都不怕，你还怕什么？