#javascript #vue.js #vuejs2 #vue-component
#javascript #vue.js #vuejs2 #vue-компонент
Вопрос:
У меня довольно конкретный вопрос.
Я использую 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"
.
Какой из подходов лучше? и как бы я их достиг? Спасибо!
Ответ №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}
Комментарии:
1. Спасибо! Однако я хотел бы использовать ее в той части, где я делаю new Vue(), как в моем вопросе, возможно ли это?
2. Работал нормально, просто изменил использование на
Vue.directive("click-outside", clickOutside);
3. где
clickOutside
— имя импортированного файла4. directiveName — это просто пример, директива может быть импортирована в любое место вашего приложения vue (main.js и компоненты