组件传值

119 阅读2分钟

父传子

1.父传子的第一种方式

父组件通过自定义属性传递,子组件通过 props 接收

接收到的数据可以修改吗?是简单数据类型的话不能改,复杂数据类型引用的话不能改内容可以改,但是即便如此,也不建议修改。为什么?

因为单项数据流的思想:如果任何一个地方都可以修改数据,应用复杂出现错误的时候,意味着这个错误可能是任何一个地方导致的,不方便追溯。

怎么处理比较好?数据在哪来的就在那里修改!

2.父传子的第二种方式

父亲通过 ref 获取子组件实例,调用此实例的方法的同时并传递参数,儿子方法中接收到的参数做对应的修改!

3.父传子的第三种方式

this.$children[0].changeAge(this.age)

4.父传子的第四种方式

//非 props 属性
this.$attrs

子传父

1.儿子通过 $emit 触发父亲自定义事件的同时并传递参数,父亲监听自定义事件的同时在回调里面进行数据修改的操作。

  1. this.$parent 拿到父组件实例的同时,调用方法并传参

3.父传子,只不过父组件传递的是一个方法,子组件调用这个方法并传参

4.通过 this.$listeners 拿到父亲的自定义事件,调用并传参

兄弟

1.状态(数据)提升

A修改B,把B中的数据提升到公共的父组件里面,A通过子传父修改父亲的数据,父亲通过父传子传递把数据传递到B

2.EventBus(事件中心、发布订阅)

Vue3中的 EventBus 被废弃了,你觉得为什么?

太过于灵活,大型项目不太方便追溯问题,由于 EventBus 本身实现起来足够简单,Vue3处于自身体积小的考虑,所以被废弃了!

如果我还想使用怎么办?

官方推荐了两个包,例如mitt或tiny-emitter或者自己实现一个