Блог

У меня довольно конкретный вопрос.

Я использую vue в своем приложении rails через rails webpacker, чтобы использовать компоненты 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" .

Какой из подходов лучше? и как бы я их достиг? Спасибо!

Создайте папку с именем 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}