请举例教我第二种方式如何实现兄弟组件之间相互传参
时间: 2024-04-10 15:33:50 浏览: 61
C程序设计语言(第2版·新版)
当使用事件总线(Event Bus)实现兄弟组件之间的传参时,可以按照以下步骤进行操作:
1. 创建一个新的Vue实例作为事件总线:
```javascript
// EventBus.js
import Vue from 'vue';
const bus = new Vue();
export default bus;
```
2. 在需要传参的组件中,通过事件总线触发一个自定义事件,并传递参数:
```javascript
// ComponentA.vue
import bus from './EventBus';
export default {
methods: {
sendData() {
const data = 'Hello from Component A!';
bus.$emit('data-updated', data);
}
}
}
```
3. 在接收参数的组件中,通过事件总线监听该自定义事件,并在回调函数中接收参数:
```javascript
// ComponentB.vue
import bus from './EventBus';
export default {
created() {
bus.$on('data-updated', (data) => {
console.log(data); // 输出: Hello from Component A!
});
}
}
```
这样,当在ComponentA组件中调用`sendData`方法时,会通过事件总线触发`data-updated`事件,并将数据传递给ComponentB组件,ComponentB组件通过监听该事件并接收参数。这样就实现了兄弟组件之间的传参。
请注意,在使用事件总线时,需要确保事件总线(Event Bus)的引入和实例化是在所有组件之前完成的,以便组件之间能够正确地进行事件通信。
阅读全文