Question

我的根组件的结构类似于：

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

在某些页面上，我想通过将带有按钮的组件从路由器视图的子组件传递到Header组件，向标题添加一些其他按钮。由于我们在谈论按钮，因此我需要能够侦听click事件并处理子组件中的事件。

我知道如何将信息从父级传递给子级，也知道如何从子级组件发出事件以由父级组件处理，但这似乎不是正确的方法（我可能错了）。

我可能会缺少一些东西，但是我不知道如何将组件从CHILD传递给PARENT。

有什么想法吗？

Answer 1

您应该尝试创建一个event bus，而不是像这样在组件之间直接传递数据。在这种情况下，它只是另一个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并根据显示的路线更改按钮。

从Vue中的子级向父级添加组件

1 个答案: