如何将指令从 main.js 移动到外部文件 Vue 3

Question

我想要一个干净的 main.js 为此，我想将指令移动到外部文件中。也就是说，做类似

的事情

//main.js
import directives from "./extensions-vue/directives";
app.directive(directives);

并在外部文件中

export default {
    myDirective: {
        mounted(el) {
            alert(el);
        },
    },
};

我的版本当然不行，如何正确操作

Answer 1

在单独的文件中定义它们，例如：

export default {
    'alert': {
        mounted(el) {
            alert(el);
        },
    },
  'log': {
        mounted(el) {
            console.log(el);
        },
    },
};

然后将它们导入 main.js 并遍历它们以全局声明它们:

//main.js
import directives from "./extensions-vue/directives";

Object.keys(directives).forEach(key=>{ //Object.keys(directives) gives ["alert","log"]

   app.directive(key,directives[key])
//directive name--^    ^-------directive definition

})

Answer 2

好吧，他们在文档中并没有真正提供一个好的选择，我是这样使用的：

在directives/index.js:

export const focusDirective = {
  mounted(el) {
     el.focus();
 }};

在main.js中：

import { focusDirective } from './directives'; // import all wanted directives
const app = createApp(App);
app.directive('focus', focusDirective );

我觉得它比其他答案更简单、更直观，但我更喜欢一种方法让我的指令文件全局注册这些指令，而无需在 main.js[=12= 上处理它]

如何将指令从 main.js 移动到外部文件 Vue 3

How can I move directives from main.js into an external file Vue 3

javascript

vue.js

vue-directives

vuejs3