VUE中如何实现指令按需导入_按需导入 vuetify-CSDN博客

本文介绍了在大型Vue项目中如何管理和注册多个自定义指令，以保持代码的整洁和优雅。作者建议在src目录下创建一个directive文件夹，然后在index.js中集中定义和导出自定义指令。通过在main.js中使用动态导入和Object.keys遍历，可以按需导入并批量注册这些指令，避免了main.js文件的混乱，同时也使得局部注册更加方便。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

众所周知，自定义指令在vue中有两种注册方式，一种是全局注册，一种是局部注册，我查阅了CSDN不少同道中人提出的方法，基本都是较为具体的操作，并没有说，针对存在多个自定义指令时，如何快捷高效的导入，全局注册是在入口文件main.js中进行导入，然后注册，但是在大型项目中main.js导入的文件与插件可能会有很多，这就意味着，存在多个自定义指令时main.js文件会显得十分杂乱无章，而局部注册的话，又会显得不太优雅。因此可以在src文件夹下，新建directive文件夹，准备index.js文件

在index.js文件中准备好自定义指令，并且导出，举个例子：

自定义图片不显示的指令
export const imgerror = {
  inserted(el, binding) { // el指的是 使用指令的dom元素  图片标签
    // console.log(el)
    // console.log(binding.value) // 是指令的值
    // 如果图片加载失败, 设置默认图像
    el.onerror = () => { // onerror是图片加载失败后出触发, 图片加载失败后 设置图像的默认值
      console.log('图片加载失败了')
      el.src = binding.value || 'https://img0.baidu.com/it/u=3306072466,501307884&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500'
    }
  }
}
自定义元素背景的指令
export const bgc = {
  inserted(el) {
    el.style.background = 'pink'
  }
}

然后在main.js中按需导入

// import '@/directives' // 直接导入并执行会将所有的组件注册
// 将directives中所有按需导出的指令批量全部注册
// import * as 变量名 from '路径'  接收到按需导出的文件的所有成员, 会被存储到一个对象中
import * as directives from '@/directives'
// for (const k in directives) { Vue.directive(k, directives[k]) }
// console.log(Object.keys(directives)) // ['bgc', 'imgerror']
Object.keys(directives).forEach(item => { Vue.directive(item, directives[item]) })

这样子既节约空间，也比较优雅