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

【问题标题】：How can I move directives from main.js into an external file Vue 3如何将指令从 main.js 移动到外部文件 Vue 3
【发布时间】：2021-09-11 14:54:56
【问题描述】：

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

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

在外部文件中

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

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

【问题讨论】：

标签： javascript vue.js vuejs3 vue-directives

【解决方案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

})

【讨论】：