Vue.prototype.$bus = new Vue() 解释一下这段代码
时间: 2024-05-27 12:08:35 浏览: 8
这段代码的作用是在Vue实例的原型上添加一个名为$bus的属性,该属性的值是一个新的Vue实例,因此可以在Vue应用程序的任何组件中使用该属性来创建一个全局事件总线。通过使用事件总线,我们可以在组件之间传递事件和数据,而不必通过父子组件关系或Vuex进行通信。
具体来说,这里创建了一个公共的Vue实例,该实例可以充当事件总线。我们可以使用该实例的方法来发布和订阅事件。例如,我们可以在一个组件中使用`this.$bus.$emit('eventName', data)`来发布一个事件,并在另一个组件中使用`this.$bus.$on('eventName', callback)`来订阅该事件并执行回调函数。
需要注意的是,由于$bus被添加到Vue原型上,因此它将在每个Vue组件实例中都可用。这可能会导致一些潜在的问题,例如全局事件监听器可能会导致内存泄漏或不必要的性能开销。因此,我们应该仔细考虑是否真的需要在整个应用程序中使用事件总线,以及在何种情况下使用它。
相关问题
vue bus.$emit
在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'事件,可以接收到该事件并执行相应的操作,这里是将传递的字符串参数打印到控制台上。
this.$bus.$on
this.$bus.$on 是 Vue.js 中用于监听事件的方法,可以在组件之间进行通信。其中,$bus 是一个 Vue 实例,可以通过 Vue.prototype.$bus = new Vue() 进行创建。$on 方法用于监听事件,语法为 this.$bus.$on(eventName, callback),其中 eventName 是事件名称,callback 是事件触发后执行的回调函数。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)