Vue callable or events?

Question

[Игорь]

Коллеги, правильно ли использовать "колбэки" для передачи события из дочерних компонентов.
"Колбэки" передаю через "props".

Прилагаю схему.



На самом деле основная идея, это создать один компонент

MainMenu
Который в свою очередь, состоит из нескольких дочерних, а дочерние из дочерних (это я уже утрирую).

На данный момент глубина иерархии 3 ступени.

Дочерний компонент List, по нему пользователь кликнет.
Далее List вызывает callable функцию родителя и так далее.

Поднимаем событие в страницу и радуемся.

Вопросы!
На сколько это правильно?
На какие грабли можно наступить?

Спасибо!

Comments

[alex]

почему не $emit('event-name')?

[Игорь]

Alex, Как ловить их?

У меня получается на глобальном уровне, а что бы пробежать событием по всем компонентам?

[Игорь]

Игорь Попрядухин, Я имею в виду this.$root.$emit('event');

Answer 1

[Игорь]

Такс, решение выступает "emit"

в дочернем элементе

this.$parent.$emit("on-main-menu-select-item", {item})

В родительском

this.$on("on-main-menu-select-item", ({item}) => {
                    console.debug(item)
                })

Вот такой вариант тоже рабтает

export default {
        name: "CardRows",
        components: {Card},
        props: {
            items: [],
            OnClickItem: Function
        },

        methods: {
        

            itemClick({id, name}){
                if (typeof this.OnClickItem === "function"){
                    this.OnClickItem({id, name})
                }
            }
        }
    }