добавление компонента к родителю от дочернего элемента в vue

Question

Структура моего корневого компонента выглядит примерно так:

<Header />
<router-view />
<Footer />

На некоторых страницах я хотел бы добавить несколько дополнительных кнопок в заголовок, передавая компонент с кнопками от дочернего компонента маршрутизатора. просмотр к заголовочному компоненту. Поскольку мы говорим о кнопках, мне нужно иметь возможность прослушивать события нажатия и обрабатывать события в дочернем компоненте.

Я знаю, как передавать информацию от родителя к потомку, и я знаю, как отправлять события от дочерних компонентов для обработки родительскими компонентами, но это не кажется правильным (я могу ошибаться).

Возможно, я что-то упускаю, но не могу понять, как передать компоненты от РЕБЕНКА до РОДИТЕЛЯ.

Есть идеи?

Answer 1

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

Из статьи:

// ./event-bus.js
import Vue from 'vue';
export const EventBus = new Vue();

Отправка событий в автобусе:

// PleaseClickMe.vue
<template>
  <div class="pleeease-click-me" @click="emitGlobalClickEvent()"></div>
</template>

<script>
// Import the EventBus we just created.
import { EventBus } from './event-bus.js';

export default {
  data() {
    return {
      clickCount: 0
    }
  },

  methods: {
    emitGlobalClickEvent() {
      this.clickCount++;
      // Send the event on a channel (i-got-clicked) with a payload (the click count.)
      EventBus.$emit('i-got-clicked', this.clickCount);
    }
  }
}
</script>

Прослушивание событий в автобусе:

// Import the EventBus.
import { EventBus } from './event-bus.js';

// Listen for the i-got-clicked event and its payload.
EventBus.$on('i-got-clicked', clickCount => {
  console.log(`Oh, that's nice. It's gotten ${clickCount} clicks! :)`)
});

Теперь вы можете просто проверить URL и изменить кнопки в зависимости от того, какой маршрут отображается,