Vue: Обратиться к методу компонента снаружи
Имею компонент CmpTable из компонентов CmpModel. Каждый CmpModel имеет кнопку "редактировать", которая по задумке должна вызывать модалку с формой редактирования, которая лежит внутри компонента CmpEdit. При нажатии на кнопку "редактировать" вызывается метод CmpModal'а, который обращается к CmpEdit. По идее, он должен вызывать метод CmpEdit.show(), передавая в него данные CmpModel'а для обработки. Да что-то не получается вызвать этот метод. В инете пишут, что так делать можно. Но у меня не работает. Во Vue я новичок. Доки смотрю регулярно, но понимаю пока не всё. Опыта мало. Буду благодарен за помощь. Критика кода приветствуется.
.js:
/* Import Vue Components
========================================================================== */
import TableComponent from './component/TableComponent.vue';
import EditComponent from './component/EditComponent.vue';
/* Creating Vue Components
========================================================================== */
window.CmpTable = new Vue({
el: '#table-component',
components: { TableComponent }
});
window.CmpEdit = new Vue({
el: '#edit-component',
components: { EditComponent }
});
HTML:
<div id="table-component">
<table-component></table-component>
</div>
<div id="edit-component">
<edit-component></edit-component>
</div>
CmpEdit:
<template>
<div>
<div id="modal-edit" uk-modal>
...
</div>
</div>
</template>
export default {
...
methods: {
show: function() {
UIkit.modal(this.element).show(); // Пусть вас не пугает UIkit.modal(). Это стороння либа CSS-фраймворка. К вопросу отношения не имеет.
},
},
computed: {
element: function() {
return document.getElementById('modal-edit');
},
}
}
CmpTable:
export default {
...
methods: {
showModalEdit: function() {
CmpEdit.show(); // Пока без параметров
// CmpEdit здесь присутствует. console.log() его печатает. При вызове метода выдает ошибку, что такого метода не существует.
},
},
}