【Vue3基础】Vue3 组件间通信

在Vue3中，组件间通信可以通过以下几种方式实现：

1. Props / Events：父子组件之间的通信，父组件通过props向子组件传递数据，子组件通过$emit触发事件向父组件发送消息。

// 父组件
<template>
  <ChildComponent :parentData="parentData" @childEvent="handleChildEvent" />
</template>
 
<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  setup() {
    const parentData = ref('父组件数据');
    const handleChildEvent = (data) => {
      console.log('子组件触发的事件', data);
    };
 
    return {
      parentData,
      handleChildEvent
    };
  }
};
</script>
 
// 子组件
<template>
  <button @click="sendToParent">发送给父组件</button>
</template>
 
<script>
import { defineComponent, inject, props } from 'vue';
 
export default defineComponent({
  props: {
    parentData: String
  },
  setup(props) {
    const sendToParent = () => {
      inject('emit')('childEvent', '子组件数据');
    };
 
    return {
      sendToParent
    };
  }
});
</script>

2. Provide / Inject：依赖注入，父组件提供数据，子孙组件注入使用。

// 父组件
<template>
  <ChildComponent />
</template>
 
<script>
import { provide } from 'vue';
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  setup() {
    provide('data', '父组件数据');
    provide('emit', (event, value) => this.$emit(event, value));
  }
};
</script>
 
// 子组件
<template>
  <div>{{ data }}</div>
</template>
 
<script>
import { inject } from 'vue';
 
export default {
  setup() {
    const data = inject('data');
 
    return { data };
  }
};
</script>

3. Vuex：状态管理库，适用于大型应用，可以跨组件/模块共享状态。

// store.js
import { createStore } from 'vuex';
 
export default createStore({
  state() {
    return {
      sharedData: '初始数据'
    };
  },
  mutations: {
    updateData(state, payload) {
      state.sharedData = payload;
    }
  },
  actions: {
    updateData({ commit }, newData) {
      commit('updateData', newData);
    }
  },
  getters: {
    sharedData: state => state.sharedData
  }
});

4. Global Event Bus：创建一个全局事件总线，用于组件间非父子通信。

// event-bus.js
import { createEventHook } from 'vue';
export const onGlobalEvent =