bus.$on怎么监听两个b不同的bus.$emit
时间: 2023-09-26 09:11:31 浏览: 135
可以使用$on监听不同的事件名称,例如:
```
bus.$on('eventA', function(data) {
console.log('eventA被触发了,参数为:' + data);
});
bus.$on('eventB', function(data) {
console.log('eventB被触发了,参数为:' + data);
});
```
在不同的地方使用$emit触发不同的事件:
```
bus.$emit('eventA', '这是eventA的参数');
bus.$emit('eventB', '这是eventB的参数');
```
这样就可以监听并处理不同的事件了。
相关问题
this.$bus.$emit+
这是一个 Vue.js 中的事件总线的用法。`.$bus` 是一个 Vue 实例,通过 `$emit` 方法触发自定义事件。`$emit` 接受两个参数:第一个参数是事件名称,第二个参数是要传递的数据。例如:
```javascript
// 组件 A
this.$bus.$emit('myEvent', 'Hello, world!');
// 组件 B
this.$bus.$on('myEvent', (message) => {
console.log(message); // 输出:Hello, world!
});
```
这样,组件 A 触发了名为 `myEvent` 的事件,并传递了一个字符串数据 `'Hello, world!'`。组件 B 监听到 `myEvent` 事件后,输出了接收到的消息。
$bus.$emit
$bus.$emit是Vue.js中的一个方法,用于在组件之间进行事件通信。它通过触发一个自定义事件,并传递数据给其他组件。具体来说,$bus是一个Vue实例,可以在任何组件中使用。使用$emit方法可以触发一个自定义事件,并将数据传递给其他组件。
例如,假设我们有两个组件A和B,组件A想要向组件B发送一条消息。首先,在组件A中使用$emit方法触发一个自定义事件,并传递需要发送的数据。然后,在组件B中使用$on方法监听该自定义事件,并在回调函数中处理接收到的数据。
下面是一个示例代码:
// 组件A
<template>
<button @click="sendMessage">发送消息</button>
</template>
<script>
export default {
methods: {
sendMessage() {
this.$bus.$emit('message', 'Hello, Component B!');
}
}
}
</script>
// 组件B
<template>
<div>{{ receivedMessage }}</div>
</template>
<script>
export default {
data() {
return {
receivedMessage: ''
}
},
mounted() {
this.$bus.$on('message', (message) => {
this.receivedMessage = message;
});
}
}
</script>
在上述示例中,当点击组件A中的按钮时,会触发自定义事件'message',并将消息'Hello, Component B!'传递给组件B。组件B通过监听该自定义事件,并将接收到的消息显示在页面上。
阅读全文