Метод триггера в родственном компоненте Vue JS
снова нужна твоя помощь. Вот моя ситуация. VueJS2 (проект vue-cli) нет Vuex.
У меня есть компонент parent, child1 и child2.
child1 - это форма, которая получает данные из child2 (которая представляет собой таблицу). После установки флажка в строке таблицы в child2, мы заполняем форму в child1, это делается с помощью передачи event через parent (рисунок 2).
child1 имеет кнопку, а reset method (см. Рисунок 1) для очистки полей. Моя задача: когда я снимаю флажок в строке таблицы child2, форма в child1 должна быть очищена. Как мне это сделать, в частности, как получить доступ к reset method в child1 из child2 и в основном использовать этот метод из child2.
Я знаю, как передавать данные от ребенка к ребенку, но не могу понять, как иметь возможность просто манипулировать данными ребенка от его брата или сестры.
Пожалуйста помоги! Заранее спасибо!
Просто испустите другое событие, когда флажок снят, и пусть оно будет реагировать на другой дочерний компонент.
@samayo в данный момент не имеет доступа к коду. Что ж, я знаю, как передать данные child-child, но мне нужно использовать метод reset, который уже существует в child1 (рис.), Ища способ запустить его из child2 без передачи каких-либо данных, просто чтобы иметь возможность очистить поля в child1 от child2. прямо сейчас этот метод reset очищает поля, но только когда я нажимаю кнопку clear, которая является частью child1. Извините, если это слишком запутанно
@Ohgodwhy have that be responsive to the other child component., кто мне это делает. Я запутался, это не должно быть так сложно
Другими словами, как я могу очистить поля формы child1 из child2, сняв флажок или нажав кнопку в child2
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Если я правильно понимаю, у вас есть 2 дочерних компонента, и вы хотите сказать child1, чтобы он выполнил метод (сброс) из вашего компонента child2 без передачи каких-либо реквизитов.
Что ж, в этом случае ваш выбор ограничен использованием шины событий.
Посмотрите этот пример. Когда вы нажимаете кнопку в CompB, он выполняет методы внутри другого дочернего компонента: CompA
var Bus = new Vue()
var compA = {
data: () => ({ name: 'Primary' }),
template: `<p> Comp A is: {{name}}</p>`,
methods: {
reset () {
this.name = 'RESETED'
}
},
created () {
let self = this;
Bus.$on('resetA', function (payload) {
self.reset()
})
}
}
var compB = {
template: `<p> Comp B <button @click = "resetCompA"> Clear A </button> </p>`,
methods: {
resetCompA () {
Bus.$emit('resetA')
}
}
}
new Vue({
el: '#app',
components: {
'comp-a' : compA,
'comp-b' : compB
}
})<script src = "https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id = "app">
<comp-a></comp-a>
<comp-b></comp-b>
</div>не могу поблагодарить вас! делает то, что мне нужно! Ваше здоровье!
Можете немного уточнить? Также поможет пример кода. Вы пытаетесь передать данные от ребенка другому ребенку? Или, может быть, вы хотите передать событие от одного ребенка и прослушать его от другого ребенка.