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")
   }
}