Vue-5-组件通信

跨组件层级组件通信

---

1. 转换为父子关系

2. event-bus（事件总线）

• 借助 Vue 实例中的 $on() 与 $emit() 方法来实现：首先创建一个全局的 Vue 实例对象(bus)

• 在需要接收数据的组件中，利用 bus 来注册事件监听（绑定自定义事件）

• 在需要传递数据的组件中，利用 bus 来触发事件并传递数据

3. vuex

4. 示例：当我们点击位于孙元素提交按钮时，父元素的回调函数this.$bus.$on("transmit",val=>{ console.log(val)}) }打印出来自孙元素传递的信息结果{name: ‘jack’, age: 20}