[VUE]vue知識漏洞惡補

平時習慣了用本身所知的方法來解決問題。今天看到本身以前寫的組件被同事改了一下，看到一些沒怎麼用過的方法。特地去惡補了一下，算給本身打個補丁並記錄一下。

provide/inject

provide,inject這個東西，說實話我我的以爲至此爲止，我遇到的工做中他能用的場景其實很少。這個東西就是props的增強版。
一搬父子傳參咱們能夠用：

1.props

父子組件間經過屬性的寫法，直接傳參。

// 父組件
<children :parmas="data"></children>

// 子組件用props接
props:{
    data: Object
}
// 使用時直接在本vue實例用調
this.data

2.vuex

狀態管理就是一個全局的庫，在根部註冊後，在任意實例中均可以經過store調用變量。

this.$store.state

3.provide/inject

這個就是介於前二者之間的東西。他是經過在某一父組件中註冊一個變量。在其子孫組件中能夠調用其變量。不侷限在直接父子間。
用法：

// 父組件中
  export default {
    name: "Parent",
    provide: {
      for: "demo"
    }
  }

// 子孫組件
  export default {
    name: "grandson",
    inject: ['for']
  }
// 調用也是跟props同樣
this.for

provide/inject就是一個局部的小庫。在一些總體沒有必要引Vuex，在某個模塊中又須要用到一個庫的項目中它是能夠考慮的選擇。

directive（自定義指令）

須要批量操做特定dom的時候，特別是須要用到dom節點的時候。能夠考慮用自定義指令完成。 這個官網解釋得很詳細。自定義指令

1.註冊

// 注意是在根部Vue調用directive註冊，這裏寫指令的時候不須要加"v-"
Vue.directive('focus', {
  inserted: function (el) {
    el.focus()
  }
})

2.使用

// 直接加"v-"便可，dom被直接聚焦
<input v-focus>

3.生命週期（鉤子）

• bind：只調用一次，指令第一次綁定到元素時調用。在這裏能夠進行一次性的初始化設置。
• inserted：被綁定元素插入父節點時調用 (僅保證父節點存在，但不必定已被插入文檔中)。
• update：所在組件的 VNode 更新時調用，可是可能發生在其子 VNode 更新以前。指令的值可能發生了改變，也可能沒有。可是你能夠經過比較更新先後的值來忽略沒必要要的模板更新 (詳細的鉤子函數參數見下)。
• componentUpdated：指令所在組件的 VNode 及其子 VNode 所有更新後調用。
• unbind：只調用一次，指令與元素解綁時調用。

4.參數解析

• el：指令所綁定的元素，能夠用來直接操做 DOM 。

• binding：一個對象，包含如下屬性：

  1. name：指令名，不包括 v- 前綴。
  2. value：指令的綁定值，例如：v-my-directive="1 + 1" 中，綁定值爲 2。
  3. oldValue：指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。不管值是否改變均可用。
  4. expression：字符串形式的指令表達式。例如 v-my-directive="1 + 1" 中，表達式爲 "1 + 1"。
  5. arg：傳給指令的參數，可選。例如 v-my-directive:foo 中，參數爲 "foo"。
  6. modifiers：一個包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象爲 { foo: true, bar: true }。
• vnode：Vue 編譯生成的虛擬節點。移步 VNode API 來了解更多詳情。
• oldVnode：上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用。