vue3中实现组件通信的方法总结

<!-- 父组件 -->
<template>
  <ChildComponent :message="parentMessage" @childEvent="handleChildEvent" />
</template>
<script setup lang="ts">
import ChildComponent from './ChildComponent.vue';
import {ref} from 'vue'
let parentMessage = ref('Hello from parent'),
const handleChildEvent = (payload) => {
      console.log('Received event from child:', payload);
}
</script>
<!-- 子组件 -->
<template>
  <div>
    <p>{{ props.message }}</p>
    <p>{{ message }}</p>
    <button @click="emitEvent">Send Event to Parent</button>
  </div>
</template>
<script setup lang="ts">
import {defineEmits} from 'vue'
const emit = defineEmits();
// 使用defineProperty来接收数据，defineProperty不需引入直接使用即可defineProps({})或defineProps([]),
// props中的是代理对象，在模板中使用可以省略props，在js中不可省略
const props = defineProps({ message: String});
const emitEvent = () =>{
      $emit('childEvent', 'Hello from child');
}
</script>

// 祖先组件
export default {
  provide() {
    return {
      sharedData: 'Shared data from ancestor',
    };
  },
};
// 后代组件
export default {
  inject: ['sharedData'],
};

npm install vuex@next --save

// store.js
import { createStore } from 'vuex';
export default createStore({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
});

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';
createApp(App).use(store).mount('#app');

<!-- 组件 -->
<template>
  <div>
    <p>{{ $store.state.count }}</p>
    <button @click="$store.commit('increment')">Increment</button>
  </div>
</template>