How to correctly pass a parameter from a child element N nesting?

Question

Vue.js

I apologize right away - at the stage of learning vue.

For clarity, I made a small example (when you click the activity in the log).
Implementation example on codesandbox

The essence of the task is that when you click on an element in the "tree" of the catalog (in which there is a component with N nesting), pass the ID value (on which the click was made) to the very top of its parent component of the module (but this is not the root of the application ).

In the example, I implemented this by throwing events, but it confuses me that the more tree nesting, the more handlers for this click. Or tell me, maybe I'm not doing it at all.

Answer 1

provide / inject
In the root component of the tree:

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

In nested: In client code:
inject: [ 'treeRoot' ],
@click="treeRoot.$emit('item-click', item)"

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

@item-click="onItemClick"
https://codesandbox.io/s/elated-jennings-jeb07?fil...

Answer 2

Google Vuex, Event Bus