vue bus.$emit
时间: 2024-01-20 22:14:59 浏览: 87
在Vue中,可以使用事件总线来实现组件之间的通信。其中,$emit()方法用于触发一个事件,可以在事件总线上监听该事件的所有组件中接收到该事件并执行相应的操作。
下面是一个示例代码,演示了如何使用事件总线和$emit()方法:
```javascript
// main.js
import Vue from 'vue'
// 创建事件总线
const bus = new Vue()
// 把bus挂载到Vue的原型上,保证所有的组件都能通过this.$bus访问到事件总线
Vue.prototype.$bus = bus
// ComponentA.vue
export default {
methods: {
handleClick() {
// 触发事件
this.$bus.$emit('event-name', 'hello world')
}
}
}
// ComponentB.vue
export default {
created() {
// 监听事件
this.$bus.$on('event-name', (data) => {
console.log(data) // 输出:hello world
})
}
}
```
在上面的示例中,当ComponentA.vue组件中的handleClick()方法被调用时,会触发一个名为'event-name'的事件,并传递一个字符串参数'hello world'。而在ComponentB.vue组件中,通过监听'event-name'事件,可以接收到该事件并执行相应的操作,这里是将传递的字符串参数打印到控制台上。
阅读全文