Как я могу переместить директивы из main.js во внешний файл Vue 3

#javascript #vue.js #vuejs3 #vue-directives

Вопрос:

Я хотел бы иметь чистую main.js и для этого я хочу переместить директивы во внешний файл. То есть делать что-то вроде

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

и во внешнем файле

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

Моя версия конечно не работает, как это правильно сделать

Ответ №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

})