Vue.js 2.0+ 非父子之间进行通讯-eventBus-Hub

说实话,Vue.js2.0的文档真的写的跟屎一样(1.0不知道),每个知识点都要查很久的资料,因为官方真的豪放到没朋友,寥寥数语,原理都说不清楚就完了,这对基础薄弱的前端来说,真的是坑死你都不嫌多。

笔者要做非子父关系的两个组件之间的通讯,来看看官方的文档:

QQ20180101-184025@2x.png

这特么是让人看的么?! eventHub在那里定义?毛都不说清楚,已经忍不住爆粗口了好么

翻了10车资料,总结非子父关系的组建之间通讯方式如下:

1、定义公共实例(空)对象Hub,在main.js里面,Hub是一个空的实例,就像一个公交车,谁都可以上,上完即走

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由,
// 从而让整个应用都有路由功能
new Vue({
    router,
    data: {
        Hub: new Vue()
    },
    components: {
        App
    }
}).$mount('#app')

在main.js的data里面,如上所示。

2、在2个组件定义和接收事件

知识点:

定义: A.vue为事件发起组件;B.vue为事件接收组件

A.vue代码如下

methods: {
    aFunctionName: function (e) {
        this.$root.Hub.$emit('functionName', e)
    }
}

A组件通过this.$root.Hub.$emit方法,将名字为functionName的方法送到的公交车Hub上

B.vue代码如下

...
created () {
    this.$root.Hub.$on('functionName', (e) => {
        console.log(e)
    })
}
...

B组件监听公交车Hub上的名字为functionName的事件上车了没有,上车了,就执行自己组件内部的方法


如此,是不是实现了呢

2018-01-01

0 个评论