Представим, что у нас есть задача сделать компонент в виде формы ввода тегов. Не буду вдаваться в подробности, но скажу, что компонент может быть записан в отдельные файлы component.js и component.css и подключить обычным образом к странице. В Cordova, к примеру, пока это единственный способ использовать внешние компоненты, загружаемые в виде отдельных модулей, потому что нет поддержки import
Чтобы иметь обратную связь из модуля в главное приложение Vue.js нам необходимо установить событие обновления тегов, потому что нам необходимо заполучить эти введенные, чтобы потом хранить их в БД. Решением этого является добавление в методе watch модуля наблюдение для параметра tags:
tags() {
this.$root.$emit('updateTags',this.elementId, this.tags, this.tagBadges, this.existingTags);
}
Т.е., модуль будет вызывать метод в главном приложении, чтобы ему передавать обновленные данные состояния поля ввода тегов. В главном приложении в методе create создаем слушатель события для метода:
this.$root.$on('updateTags', (fieldName, tags, badges, existingTags) => {
//...
});
К примеру, если у нас несколько полей ввода на одной странице, то нам будет полезно их разграничить, ведь, чтобы получить данные того поля, который был изменен, для этого можно воспользоваться следующим кодом:
<tags-input element-id="fieldGenreTags"
:existing-tags="genreTags"
:typeahead="true">
</tags-input>
<tags-input element-id="fieldSkillTags"
:existing-tags="skillTags"
:typeahead="true">
</tags-input>
<tags-input element-id="fieldImageTags"
:existing-tags="imageTags"
:typeahead="true">
</tags-input>
this.$root.$on('updateTags', (fieldName, tags, badges, existingTags) => {
//
var tagObj = {};
tags.forEach(function(item, index, tags){
tagObj[item] = badges[index];
});
//
if("fieldGenreTags"==fieldName+"") this.curGenreTags = tagObj;
if("fieldSkillTags"==fieldName+"") this.curImageTags = tagObj;
if("fieldImageTags"==fieldName+"") this.curSkillTags = tagObj;
//
console.log("fieldGenreTags");
console.log(this.curGenreTags);
console.log("fieldSkillTags");
console.log(this.curImageTags);
console.log("fieldImageTags");
console.log(this.curSkillTags);
})
Т.е., на странице для поля мы определяем для него ID, а в методе мы по этому ID разграничиваем получаемые данные.
