Vue.js - 將自定義指令作為 ES6 模塊導入

Question

我有一個比較具體的問題。

我正在通過 rails webpacker 在我的 rails 應用程序中使用 vue，要使用 vue 組件，我必須在我的布局中放置一個 javascript pack 標簽，並引用一個 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"導入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}