Как решить эту проблему?

Question

[Ложка в мозге]

Добрый день!
Перейду сразу к делу, я хочу чтобы допустим забинденная кнопка на клик из одного компонента могла использоваться в другом. Например:

У меня есть кнопка в компоненте компоненте Navbar.vue

<template>
<div class="navbar-url">
	<div>
		<button v-on:click="a_menu_trigger">Menu</button>
	</div>
</div>
</template>

<script>
export default{
	data: function(){
		return{

		}
	}
}

</script>

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

Comments

[Игорь]

Так?

<template>
<div class="navbar-url">
  <div>
    <button v-on:click="$emit('click')">Menu</button>
  </div>
</div>
</template>

<script>
export default{
  data: function(){
    return{

    }
  }
}

</script>

Answer 1

[origami1024]

Три варианта:
1. Посылать ивент в батю, батя пошлет деду, так до общего предка, общий предок спустит пропс своим наследникам.
2. Использовать Vuex, изменять там состояние, чтобы другой элемент просто обновлялся при изменении затрагивающих его состояний
3. Общаться напрямую через рут
Компонент1:
this.$root.$emit('eventing', data);
Компонент2:

mounted() {
  this.$root.$on('eventing', data => {
    console.log(data);
  });
}

Answer 2

[Игорь]

Чтобы в родителе ловить эвенты, достаточно

child
<template>
  <div @click="$emit('click')"></div>
</template>

parent
<template>
  <div class="warp">
    <item @click="" />
    <item @click="" />
    <item @click="" />
  </div>
</template>