Как на Vue наладить взаимодействие двух дубликатов одного компонента?

Question

[dark_king_13]

У меня есть компонент Menu.vue, один раз он вызывается в App.vue и содержит основное меню, Второй раз в одном из роутов, где содержит доп меню. На малых экранах оба меню складываются в кнопку, по нажатию на которую меню выезжает. Мне необходимо сделать так, чтоб при открытии одного меню, второе тут же сварачивалось.

Код компонента

Мне нужно сделать так, чтоб оба меню не могли быть открыты одновременно

Вид на сайте

Answer 1

[Aetae]

Если есть уверенность, что конкретный компонент может иметь только один единовременно открытый инстанс, то можно напрямую сделать общее состояние для всех инстансов. Что-то вроде:

const state = Vue.observable({ current: 0 });
export default {
  computed: {
    isOpen() {
      return state.current === this._uid
    }
  },
  methods: {
    open() {
      return state.current = this._uid;
    },
    close() {
      return state.current = 0;
    }
  },
  template: '...<div v-show="isOpen">...'
}

Answer 2

[Владимир Мацуев]

нужно чтобы родительский компонент управлял видимостью этих компонентов. тоесть в App.vue должна быть логика и в родительском компоненте где роут у вас прописан