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])  //遍历注册  
})
           

• 当然! 掌握了方法的话 过滤器也可以批量注册