Как корректно передать параметр из дочернего элемента N вложенности?

Question

[Евгений]

Сразу прошу прощение - на стадии изучения vue.

Для наглядности сделал небольшой пример (при клике активность в логе).
Пример реализации на codesandbox

Суть задачи, что бы при клике по элементу в "дереве" каталога (в котором имеется компонент с N вложенностью), передал значение ID (по которому был клик) на самых верх своему родительскому компоненту модуля (но это не root приложения).

В примере я это реализовал путем перекидывания событий, но меня смущает что чем больше вложенность дерева, тем больше обработчиков этого клика. Или подскажите, может я вообще не так делаю.

Answer 1

[0xD34F]

provide / inject

В корневом компоненте дерева:

provide() {
  return {
    treeRoot: this,
  };
},

Во вложенном:

inject: [ 'treeRoot' ],

@click="treeRoot.$emit('item-click', item)"

В клиентском коде:

methods: {
  onItemClick(item) {
    // ...
  },
},

@item-click="onItemClick"

https://codesandbox.io/s/elated-jennings-jeb07?fil...

Comments

[Евгений]

Благодарю. Теперь стало всё понятно. Спасибо за наглядный пример.

[Евгений]

У меня только сложность одна возникла.
Почему то если я не зарегистрирую компонент (который рекурсивно используется) - глобально, выдает ошибку.
"did you register the component correctly"

[0xD34F]

Евгений, там дальше в сообщении об ошибке прямо говорится, что надо сделать для корректной работы рекурсивного компонента.

Answer 2

[Константин Б.]

Гуглите Vuex, Event Bus