一、概念解析

成對出現：provide和inject是成對出現的

作用：用於父元件向子孫元件傳遞資料

使用方法：provide在父元件中返回要傳給下級的資料，inject在需要使用這個資料的子輩元件或者孫輩等下級元件中注入資料。

使用場景：由於vue有$parent屬性可以讓子元件訪問父元件。但孫元件想要訪問祖先元件就比較困難。通過provide/inject可以輕鬆實現跨級訪問父元件的資料

EventBus

// main.js
Vue.prototype.$eventBus = new Vue()


// 需要訂閱的地方
this.$eventBus.$on('update', val => {})

// 需要釋出資訊的地方
this.$eventBus.$emit('update', '更新資訊')

// 需要移除訂閱

this.$eventBus.$off('update', {})


 

vue自定義指令及使用

一、什麼是指令

學習 vue 的時候肯定會接觸指令，那麼什麼是指令呢？

• • 在 vue 中提供了一些對於頁面和資料更為方便的輸出，這些操作就叫做指令，以 v-xxx 表示，比如 html 頁面中的屬性<div v-xxx ></div>

• • 比如在 angular 中 以 ng-xxx 開頭的就叫做指令

  • 指令中封裝了一些 DOM 行為，結合屬性作為一個暗號，暗號有對應的值，根據不同的值，會進行相關 DOM 操作的繫結，即可以進行一些模板的操作

自定義指令

總結：

• • bind()：當指令繫結在 HTML 元素上時觸發

  • inserted()：當指令繫結的元素插入到父節點中的時候觸發

  • update()：當指令繫結的元素狀態/樣式、內容(這裡指元素繫結的 vue 資料) 發生改變時觸發

  • componentUpdated()：當 update() 執行完畢之後觸發

  • unbind()：當指令繫結的元素從 dom 中刪除時觸發

舉幾個應用場景的栗子

（1、輸入框自動獲取焦點(官方示例)。

（2、點選下拉選單以外的區域隱藏選單。

（3、輸入的郵箱、電話的校驗。

上面這幾個場合，在做專案的時候可以用其他方法代替，但是 vue 自定義指令能做到一處定義，全域性呼叫，使得程式碼簡潔高效，更便於維護。

指令的註冊方式和「過濾器」「混入」「元件」註冊的方式一樣都分為兩種：一是全域性註冊，二是區域性註冊。