Question

我有一个非常具体的问题。

我正在通过rails webpacker在rails应用程序中使用vue，以使用vue组件，我必须在布局中放置一个javascript pack标签，并且引用了一个JavaScript文件，该JavaScript文件又呈现了vue组件，您可以想象总的来说，这种方法使我做出了许多变通办法，但是我仍然要留的一件事是我必须添加到每个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);
}

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

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

这两种方法中的哪一种更好？我将如何实现它们？谢谢！

Answer 1

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

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}

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

1 个答案: