父传子
1.父传子的第一种方式
父组件通过自定义属性传递,子组件通过 props 接收
接收到的数据可以修改吗?是简单数据类型的话不能改,复杂数据类型引用的话不能改内容可以改,但是即便如此,也不建议修改。为什么?
因为单项数据流的思想:如果任何一个地方都可以修改数据,应用复杂出现错误的时候,意味着这个错误可能是任何一个地方导致的,不方便追溯。
怎么处理比较好?数据在哪来的就在那里修改!
2.父传子的第二种方式
父亲通过 ref 获取子组件实例,调用此实例的方法的同时并传递参数,儿子方法中接收到的参数做对应的修改!
3.父传子的第三种方式
this.$children[0].changeAge(this.age)
4.父传子的第四种方式
//非 props 属性
this.$attrs
子传父
1.儿子通过 $emit 触发父亲自定义事件的同时并传递参数,父亲监听自定义事件的同时在回调里面进行数据修改的操作。
this.$parent拿到父组件实例的同时,调用方法并传参
3.父传子,只不过父组件传递的是一个方法,子组件调用这个方法并传参
4.通过 this.$listeners 拿到父亲的自定义事件,调用并传参
兄弟
1.状态(数据)提升
A修改B,把B中的数据提升到公共的父组件里面,A通过子传父修改父亲的数据,父亲通过父传子传递把数据传递到B
2.EventBus(事件中心、发布订阅)
Vue3中的 EventBus 被废弃了,你觉得为什么?
太过于灵活,大型项目不太方便追溯问题,由于 EventBus 本身实现起来足够简单,Vue3处于自身体积小的考虑,所以被废弃了!
如果我还想使用怎么办?
官方推荐了两个包,例如mitt或tiny-emitter或者自己实现一个