vue批量注冊自定義指令

在vue項目的時候 可以更加友善的批量注冊自定義指令

• 首先了解一個文法

• Object.key() 周遊對象

  – 會把對象所有的key儲存到一個數組裡

  – 然後使用forEach周遊 就可以得到所有的屬性名

obj: {
    name: '張三',
    age: 15
}
Object.key(obj).forEach(item => {  // 得到['name', 'age']
    屬性名是 item
    屬性值是 obj[item]
})
           

• 批量注冊自定義指令或過濾器

  – 在js檔案中定義各種自定義指令的對象

  – 裡面封裝了很多自定義指令的dom使用 并且每個對象都按需導出

// 注冊一個圖檔如果加載失敗  顯示失敗圖檔的自定義指令
export const errorImg = {
  inserted(el, binding) {
    el.onerror = function() {
      el.src = binding.value
    }
  }
}
           

• 然後在main.js使用

  import * as result

  導出

  – * as把檔案裡的内容全部導出的意思

• 然後使用Object.key()去周遊注冊

// result是一個對象  對象裡面有很多自定義指令
import * as result from '指令js檔案位址'   
// 方式一:
for(let k in result) {
    Vue.directive(k, result[k])  //周遊注冊
}
// 方式二:
Object.key(result).forEach(item => { 
    // item就是屬性名  類似于for in的k   
    // result[item]就是屬性值  類似obj[k]  
     Vue.directive(item, result[item])  //周遊注冊  
})
           

• 當然! 掌握了方法的話 過濾器也可以批量注冊