vue-bus插件的实现

wlqdbtx

于 2019-12-23 14:41:39 发布

阅读量609

点赞数

分类专栏： vue 文章标签： vue-bus 中央事件总线

本文链接：https://blog.youkuaiyun.com/wlqdbtx/article/details/103664460

版权

vue-bus作为Vue中的中央事件总线，用于跨组件通信。它创建一个额外的Vue实例，方便组件间通过$bus进行事件监听和触发。Vue插件机制允许我们扩展其功能，注册插件需要install方法，并通过Vue.use来使用。vue-bus为Vue实例添加$bus属性，提供on和emit方法处理事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-bus又叫中央事件总线，是vue中实现跨级组件和兄弟组件之间通信的方式。它的原理是额外定义一个vue的实例，所有的事件监听和触发都是通过这个函数进行的。

什么是插件

Vue提供了插件机制，让我们可以在全局添加一些功能。它可以只是提供几个简单的方法或熟悉，也可以是复杂的组件库。

往Vue中注册插件需要提供一个install方法，如下实例所示：

MyPlugin.install = function(Vue, options) {
    Vue.component('comp-name', {
        // 组件内容
    })
    // 往Vue实例添加方法
    Vue.prototype.xx = function() {
        // 方法内容
    };
    ...
};

接着通过Vue.use方法来使用插件

Vue.use(MyPlugins, {
    // 可以传一些参数
})

vue-bus

它会给vue实例添加$bus属性，让用户可以调用它所提供的on、emit等方法去注册和触发事件。示例代码如下：

// vue-bus.js

const install = function(Vue) {
    const bus = new Vue({
        methods: {
            emit(event, ...args) {
                this.$emit(event, ...args);
            },

最低0.47元/天解锁文章