# [Vue cli] event $bus元件橋樑
###### tags: `Vue.js`

`$bus.$emit`就是與另一個vue頁面做串連，例如彈出視窗、加入購物車

元件用法又分為兩種，一種只是圖型呈現，就只需要搭載至主頁面中就可以，另一種是需要呼叫主頁面裡的變數、函式，就需要用到emit及props呼叫。

### 第一種元件：單純呈現template
* 沒有js函式的部分

下圖為示範主頁面如何載入元件，例如：sidebar、navbar

<template>
    <div>
        <Navbar/>
    </div>
</template>

<script>
import Navbar from './Navbar'

export default {
    components:{ 
        Navbar,
    }}
</script>

### 第二種元件：需使用主頁面的變數及函式
變數使用props，函式使用emit，除了跟上圖一樣啟用載入元件路徑之外，還需要在載入對應的變數及函數(如下圖)，例如：頁籤

<Pagination :A="pagination" @B="getProducts" ></Pagination>

### 第三種元件：當觸發事件後，在元件內會進行函式運算
無須啟用圖一的載入元件路徑，只需在接口處註冊新增$bus.$on(自定義名稱A)

 created() {
      this.getCart();
      const vm = this;
      
      vm.$bus.$on('updateCart',()=>{
        vm.getCart();
      });
    },

> 接口處就是指created()
>

並再主頁面點擊某種物件時，同時觸發元件A內容，使用$bus.$emit當作接口回傳至元件內部執行函式裡的內容即可，例如：彈跳提示視窗、包含動態式購物車也要(另需template增加<>項目)。

注意，如果要放置在template裡的元件，才有需要執行圖一的啟用動作。

this.$http.post(api, cart).then((res) => {
    vm.$bus.$emit('updateCart');
    this.$bus.$emit('message:push',res.data.message,'success')

## 案例一:跳出提示訊息

#### 背景：
因為alert要一層一層呼叫最底層太費工，因此可以使用$bus方法來直接註冊在vue的下一層，alert就可直接彈出視窗

#### 新增元件
1. 新增vue頁面稱作為alert
2. 掛載到dashborad裡，與sidebar及navbar相同
3. 新增alert的內容，包含顯示警告的樣式等等

#### 掛在vue底層，所有元件都可使用跨域採用
4. 新增bus的新vue介面，寫上語法(掛在根目錄下)
5. 在main.js裡import剛新增的bus路徑

#### 註冊並取用
6. 在alert的vue頁面下新增語法，在created()裡註冊vm.$bus.$on(‘自定義命名’), message,status，之後再載入method裡主觸發語法
7. 函式內容用on註冊(例如彈跳提醒)，需要時用emit呼喚(點擊購買)
9. 在需要使用alert的vue頁面新增語法，放在需要此條件的位置(如刪除提示)呼叫emit自定義的名稱及寫上message及status的狀態即可使用。