vue非父子组件通讯(以实现全局“回到顶部”功能为例)

vue非父子组件通讯，经过eventHub来实现通讯，所谓eventHub就是建立一个事件中心，至关于中转站，能够用它来传递事件和接收事件.

一、建立一个公共实例，做为中间仓传值

// libs/bus.js
import Vue from 'vue'
let BUS = new Vue(); //建立事件中心
export default BUS

二、定义：组件2接收:

// 引入bus.js
created() {
    // 接收 toPageTop
    Bus.$on('toPageTop', () => {
        document.getElementById('single-page-con').scrollTop = 0;	// 所有回到顶部功能
    })
}

三、使用：组件1触发：

// 引入bus.js
<Button @click="toPageTop"></Button>
methods: {
   toPageTop: function () {
       Bus.$emit("toPageTop")
   }
}