Vue 组件间的通信是 Vue.js 框架中一个非常重要的概念。在本文中，我们将探讨 Vue 组件间通信的不同方式。

通信方式

  1. Props 和 Events

    • 组件通过 props 接收数据，通过 events 发送数据。
    • 例如，子组件可以通过 $emit 方法向父组件发送事件。

  2. 自定义事件

    • 使用 v-on 或 @ 来监听自定义事件。
    • 例如，在子组件中：this.$emit('update:message', newValue)。

  3. Vuex

    • Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式和库。
    • 它采用集中式存储管理所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

  4. $refs

    • $refs 是一个直接引用组件实例的方式。
    • 通过 $refs，你可以直接访问子组件的数据和方法。

  5. 事件总线

    • 事件总线（Event Bus）是一个简单的 Vue 实例，用于跨组件通信。
    • 它通过 $on、$off 和 $emit 方法来监听和触发事件。

实例

假设我们有一个父组件和一个子组件，子组件需要将数据传递给父组件。

<!-- 父组件 -->
<template>
  <div>
    <child-component @message="handleMessage"></child-component>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: ''
    };
  },
  methods: {
    handleMessage(msg) {
      this.message = msg;
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <button @click="sendMessage">Send Message</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message', 'Hello from Child Component!');
    }
  }
}
</script>

扩展阅读

以上就是 Vue 组件间通信的一些基本概念和方法。希望对你有所帮助！