@mifa-toster

VUE.JS: Как воспользоваться методом компонента внутри другого компонента?

Есть компонент App.vue с набором компонентов:
<template>
    <div id="app">
        <Header>
            <Button onClick="" />
        </Header>
        <Menu />
    </div>
</template>

Компонент Button.vue принимает в качестве параметра функцию-обработчик клика.

У компонента Menu.vue имеется метод:
export default {
    methods: {
        onMenuOpen () {// menu is opened.}
    }
}


ВОПРОС: Как ПРАВИЛЬНО с точки зрения архитектуры пробросить метод компонента Menu в качестве параметра компоненту Button? Что бы получить примерно следующее:
<template>
    <div id="app">
        <Header>
            <Button :onClick="onMenuOpen" />
        </Header>
        <Menu />
    </div>
</template>
  • Вопрос задан
  • 441 просмотр
Решения вопроса 2
0xD34F
@0xD34F Куратор тега Vue.js
пробросить метод компонента Menu в качестве параметра компоненту Button

Не надо так.

Пусть Button генерирует событие клика, на которое вы подпишитесь в App и в обработчике измените какое-то свойство, которое в качестве параметра передаётся в Menu, где вы в зависимости от значения этого параметра будете предпринимать нужные действия (пример). Накрайняк - поставьте ref на экземпляр Menu и в обработчике клика напрямую дёргайте интересующий вас метод (пример).
Ответ написан
Fragster
@Fragster
помогло? отметь решением!
Либо переходить на vuex, либо соорудить event bus, например по мануалу из https://habr.com/post/332628/ (в таком подходе можно несколько независимых шин сделать, что может быть удобным)
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы