Как правильно реализуется передача данных во вложенных компонентах?

Question

[Антон Шаманов]

После прочтения базового мануала по Vue 3 возник вопрос: как лучше реализовать передачу значений из родительского компонента в дочерние и наоборот?
Есть вложенный список для построения меню:

let items = [
    { label: 'Home', url: '/', items: []  },
    { label: 'About', url: '/about/', items: []  },
    {
      label: 'Sub Menu',
      url: '/submenu/',
      items: [
        { label: 'First item', url: '/submenu/item-1/', items: []  },
        { label: 'Second item', url: '/submenu/item-2/', items: []  },
        {
          label: 'Sub Menu 2',
          url: '/submenu/submenu-1/',
          items: [
            { label: 'First sub-item', url: '/submenu/submenu-1/item-1/', items: []  },
            { label: 'Second sub-item', url: '/submenu/submenu-1/item-2/', items: []  },
            { label: 'Third sub-item', url: '/submenu/submenu-1/item-3/', items: []  }
          ]
        }
      ]
    }
  ];

Компонент списка NestedList содержит компоненты элементов списка NestedListItem, которые в свою очередь содержат вложенные списки NestedList и т.д.
Активная ссылка - activeUrl (например, '/submenu/submenu-1/item-2/') и id префикс для вложенных списков - idPrefix(например, 'nested-list-item-') указываются для корневого NestedList и передаются вложенным компонентам.
Свойство isActive (activeUrl === url) вычисляется в компонентах NestedListItem и передается наверх по цепочке родительских компонентов('Sub Menu' < 'Sub Menu 2' < 'Second sub-item') и активным элементам добавляется класс active.
Как лучше/правильнее организовать

• передачу значений activeUrl и idPrefix от корневого NestedList к дочерним NestedList и NestedListItem
  
• передачу значения isActive из дочернего NestedListItem в родительские NestedList и NestedListItem
  

?

Answer 1

[bqio]

Либо через $emit и props, либо через:
https://vuex.vuejs.org/

Answer 2

[chopix]

vuex