Vue.js -Importing自定义指令作为ES6模块

Question

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

我正在通过rails webpacker在我的rails应用程序中使用vue，为了使用vue组件，我必须在布局中添加一个javascript标记，并且引用一个javascript文件，该文件反过来呈现vue组件，您可以想象，总的来说，这种方法使我做出了许多解决办法，但我仍然需要添加一个vue自定义指令click-outside，我必须在我的vue组件生成器中添加一个vue自定义指令click-outside，例如在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);
}

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

directly.

• Create
• 在ES6模块中拥有该自定义指令的大容量，并在这里导入该指令，只需使用它-- 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}