Vue.js-将自定义指令作为ES6模块导入

Question

我有一个相当具体的问题。

我通过rails-webpacker在我的rails应用程序中使用vue，要使用vue组件，我必须在布局中放置一个javascript包标记，该标记引用一个javascript文件，该文件反过来渲染vue组件，但我还剩下一个vue自定义指令click-outside，我必须将它添加到我的每个vue组件生成器中，例如，在filter-products.js中

import Vue from "vue";
import filterProducts from "../../views/filter-products";
var element = document.getElementById("filter-products");
const props = JSON.parse(element.getAttribute("props"));
Vue.directive('click-outside', {
bind: function(el, binding, vNode) {
//bind logic
},
unbind: function(el, binding) {
//unbind logic
}
});
if (element != null) {
new Vue({
render: (h) => h(filterProducts, { props }),
}).$mount(element);
}

自定义指令代码实际上很大，所以我想但不确定如何做的是两件事之一：

• 在ES6模块中拥有该自定义指令的批量，并将其导入此处，然后直接使用它
• 为Vue创建一个包含此自定义指令的原型并导入它，而不是导入vue from "vue"

这两种方法都更好吗？我将如何实现这些目标？谢谢

Answer 1

创建一个名为directives的文件夹，并为每个指令创建一个文件，使您的代码更有组织性和可维护性，尤其是在团队中：

import Vue from 'vue';
const directiveName = {
inserted: function(el, binding) {},
update: function(el, binding) {},
};
export default directiveName;
Vue.directive('directiveName', directiveName);//optional

然后在任何组件中导入，如：

import directiveName from 'path-to-directives-folder/directives/directiveName'

然后按如下方式使用：

data(){
...
},
directives:{directiveName}