从$emit 到 父子组件通信 再到 eventBus

从 $emit 到父子组件通信，是Vue.js框架中一种非常常见的组件间通信方式。通过在子组件中使用$emit触发一个事件，然后在父组件中监听这个事件来实现通信。

而eventBus是一种更加灵活的组件间通信方式，它可以在任何组件之间进行通信，而不仅仅是父子组件。eventBus其实就是一个Vue实例，我们可以在其中定义事件和监听器，然后在任何组件中使用$emit和$on方法来触发和监听事件。

eventBus的使用需要注意一些问题，例如在组件销毁时需要手动解除事件监听，否则可能会导致内存泄漏等问题。另外，eventBus的全局性也可能会带来一些风险，例如可能导致代码的可读性和维护性下降等问题。

因此，在实际开发中，我们需要根据具体场景来选择合适的组件间通信方式，综合考虑使用方便性、性能、可维护性等各方面因素。

相关问题

描述父子组件和非父子组件是怎么通信的

在Vue中，父子组件通信和非父子组件通信的方式是不同的。

1. 父子组件通信：父子组件之间的通信可以通过`props`和事件来实现。父组件可以通过`props`向子组件传递数据，子组件可以通过`$emit`触发事件并向父组件传递数据。比如，我们可以在父组件中向子组件传递一个名字：

父组件：

<template>
  <div>
    <child-component :name="name" @update-name="updateName"></child-component>
  </div>
</template>

<script>
import ChildComponent from "@/components/ChildComponent.vue";

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      name: "Vue",
    };
  },
  methods: {
    updateName(newName) {
      this.name = newName;
    },
  },
};
</script>

子组件：

<template>
  <div>
    <p>My name is {{ name }}</p>
    <button @click="changeName">Change Name</button>
  </div>
</template>

<script>
export default {
  props: {
    name: String,
  },
  methods: {
    changeName() {
      this.$emit("update-name", "React");
    },
  },
};
</script>

2. 非父子组件通信：非父子组件之间的通信需要借助一个中央事件总线（event bus）来实现。可以在Vue实例中创建一个事件总线，并通过`$emit`触发事件，通过`$on`监听事件。比如，我们可以在一个组件中触发一个事件，另一个组件中监听这个事件：

// Event Bus
const eventBus = new Vue();

// Component A
<template>
  <div>
    <button @click="emitEvent">Emit Event</button>
  </div>
</template>

<script>
export default {
  methods: {
    emitEvent() {
      eventBus.$emit("event-name", "Event Data");
    },
  },
};
</script>

// Component B
<template>
  <div>
    <p>{{ eventData }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      eventData: "",
    };
  },
  mounted() {
    eventBus.$on("event-name", (data) => {
      this.eventData = data;
    });
  },
};
</script>

这样，当在组件A中点击按钮时，会触发一个名为`event-name`的事件，并向事件总线传递一个数据。组件B中监听这个事件，并在事件回调中更新数据。这样就实现了非父子组件之间的通信。

vue父子组件怎么通信

Vue父子组件通信的方式有以下几种：

1. Props和$emit：父组件通过props向子组件传递数据，子组件通过$emit触发事件向父组件传递数据。

2. $refs：父组件通过$refs获取子组件实例，然后直接调用子组件的方法或访问子组件的属性。

3. EventBus：通过中央事件总线（EventBus）实现组件之间通信，即在Vue实例中创建一个空的Vue实例作为事件中心，然后在组件中通过$emit触发事件，$on监听事件。

4. Vuex：Vuex是Vue.js的状态管理库，可以用于管理全局状态，父组件和子组件都可以通过Vuex获取和修改状态。

5. Provide和Inject：父组件通过provide向子组件提供数据，子组件通过inject注入获取数据。这种方式适用于父子组件之间存在多层嵌套的情况。