如果存在多自定义指令的情况，vue3如何在一个单独文件中统一注册

来源：2-11 v-loading 自定义指令的开发

Dxxxxxxw

2021-04-28

图片描述

假如说存在很多自定义指令的情况下，那么 main.js 中的这个链式调用就会很长。
而在 vue2 中就可以通过如下形式进行注册：

// 在 src/directives/index.js 中
import Vue from 'vue'

Vue.directive('focus',{})
Vue.directive('input',{})
...

// 在 main.js 中
import '@/directives'

而我在 vue3 中这么做就报错了。以下是代码：

// 在 src/directives/index.js 中
import loadingDirective from '@/components/base/loading/directive'
import { createApp } from 'vue'

const app = createApp({})

app.directive('loading', loadingDirective)

// 在 main.js 中
import '@/directives'

写回答

1回答

ustbhuangyi

2021-04-28

已采纳

想拆到单独文件中很容易呀

在文件中定义一个单独的 registerDirective(app) 函数，把 app 对象传进去，在函数内部去注册指令。

Dxxxxxxw

思维局限了，完全没想到函数传参的方式，谢谢老师！

2021-04-28

共1条回复

Vue3开发企业级音乐Web App 明星讲师带你学大厂代码

慕课网明星讲师黄轶深度讲解 Vue3.0 ，提升的不止是Vue代码能力

2234 学习 · 1012 问题

查看课程

相似问题

自定义指令触发多次

回答 1

黄老师，2.0版本的自定义指令要怎么写啊，像课中用到.vue文件作为参数的这种，vue官方的例子太简单了

回答 1

关于Loading指令里对Position的处理

回答 2

多个自定义指令问题！

回答 1

如何定义一个使用过插件的BScroll实例的类型？

回答 1

打开慕课网App查看更多内容