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数值,所有改变的情况都已经清楚!

 

【完】

连死都不怕,你还怕什么?

 

posted @ 2018-11-15 17:55  tangjiao_Miya  阅读(213)  评论(2编辑  收藏  举报