组件通讯

• props/$emit
• vuex/pinia
• provide/inject
• mitt

1、Props / Emits

// Parent.vue
<template>
  <ChildComponent :parentData="parentData" @updateData="updateParentData" />
</template>
<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
const parentData = ref('initial data');
function updateParentData(newData) {
  parentData.value = newData;
}
</script>

// Child.vue
<template>
  <div>
    <p>{{ parentData }}</p>
    <button @click="updateDataToParent('new data')">Update Data</button>
  </div> 
</template>
<script setup>
import { defineProps, defineEmits } from 'vue';
const props = defineProps({
  parentData: String
});
const emit = defineEmits(['updateData']);
function updateDataToParent(newData) {
  emit('updateData', newData);
}
</script>

2、provide/inject

// Parent.vue
<script setup>
    import { provide } from "vue"
    provide("name", "RDIF")
</script>

// Child.vue
<script setup>
    import { inject } from "vue"
    const name = inject("name")
    console.log(name) // RDIF
</script>

3、mitt

// mitt.js
import mitt from 'mitt'
const mitt = mitt()
export default mitt

// 组件 A
<script setup>
import mitt from './mitt'
const handleClick = () => {
    mitt.emit('handleChange')
}
</script>

// 组件 B 
<script setup>
import mitt from './mitt'
import { onUnmounted,onMounted } from 'vue'
function someMethed(){
    alewrth('hello')
}
onMounted(()=>{
    mitt.on('handleChange',someMethed)
})
onUnmounted(()=>{
    mitt.off('handleChange',someMethed)
})
</script>