vue 组件通信的多种方式

Vue 组件通信是一个非常重要的知识点，涉及到 Vue 组件之间消息传递和状态共享的问题。Vue 组件通信的多种方式包括以下几种：

1. 使用 Props 和事件进行父子组件之间通信。

在 Vue.js 中，父子组件之间通信是通过 Props 和事件实现的。父组件通过 Props 向子组件传递数据，子组件通过事件向父组件发送消息。

以下是一个简单的示例：

父组件：

<template>
  <div>
    <!-- 向子组件传递数据 -->
    <child-component :message="data" @callback="handleCallback"/>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      data: 'Hello World'
    }
  },
  methods: {
    handleCallback(msg) {
      console.log(msg);
    }
  }
}
</script>

子组件：

<template>
  <div>
    <!-- 子组件接收数据 -->
    <p>{{ message }}</p>
    <button @click="handleClick">发送消息到父组件</button>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  },
  methods: {
    handleClick() {
      // 子组件向父组件发送消息
      this.$emit('callback', '这是来自子组件的消息');
    }
  }
}
</script>

1. 使用 Vuex 进行跨组件数据传递和状态共享。

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。其核心是一个 Store，可以统一管理应用程序中的所有状态，并且通过 Mutations 和 Actions 等机制实现了组件之间的数据传递和状态共享。

以下是一个简单的示例：

<template>
  <div>
    <!-- 组件1读取Vuex中的数据 -->
    <p>{{ message }}</p>
    <button @click="updateMessage">修改Vuex中的数据</button>
    <!-- 组件2读取Vuex中的数据 -->
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState({
      message: state => state.message,
      count: state => state.count
    }),
    ...mapGetters([
      'getCount'
    ])
  },
  methods: {
    ...mapMutations({
      updateMessage: 'updateMessage'
    }),
    ...mapActions([
      'increment'
    ])
  }
}
</script>

1. 使用 Event Bus 实现非父子组件之间的通信。

Event Bus 可以理解为一个事件中心，用于管理组件之间的消息通信。在 Vue.js 中，可以通过创建一个全局的 Vue 实例作为 Event Bus，然后在需要通信的组件中使用 $emit 和 $on 方法进行信息发送和接收。

以下是一个简单的示例：

<!-- 组件1 -->
<template>
  <div>
    <button @click="sendMessageToBus">发送消息到Event Bus</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessageToBus() {
      // 发送消息到Event Bus
      this.$root.$emit('message-from-component1', '这是组件1发送的消息');
    }
  }
}
</script>

<!-- 组件2 -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    // 从Event Bus中接收消息
    this.$root.$on('message-from-component1', (data) => {
      this.message = data;
    });
  }
}
</script>

以上是关于 Vue 组件通信的多种方式的简单介绍，并且介绍了以 Props 和事件、Vuex 和 Event Bus 为代表的三种方式。需要注意的是，不同的场景下需要选择不同的方式来进行组件通信。