我们知道,父组件不能修改子组件的数据【这种说法是不严谨的】,严谨的说法是:子组件内部不能修改从父组件传递过来的值。原因是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数值,所有改变的情况都已经清楚!
【完】
连死都不怕,你还怕什么?