Vue3 组件通信有哪些方式？

<!-- Parent -->
<template>
  <Child :message="msg" @update="handleUpdate" />
</template>

<!-- Child -->
<script setup>
const props = defineProps(['message'])
const emit = defineEmits(['update'])

emit('update', newValue)
</script>

<!-- Vue3 支持多个 v-model -->
<Child v-model:title="title" v-model:content="content" />

<!-- Child -->
<script setup>
const props = defineProps(['title', 'content'])
const emit = defineEmits(['update:title', 'update:content'])
</script>

// 祖先组件
import { provide, ref } from 'vue'

const theme = ref('dark')
provide('theme', theme)  // 提供响应式数据

// 任意后代组件
import { inject } from 'vue'
const theme = inject('theme')  // 接收

// 带默认值
const config = inject('config', { default: true })

// 只读
import { readonly } from 'vue'
provide('theme', readonly(theme))

<!-- Parent -->
<template>
  <Child ref="childRef" />
  <button @click="childRef.focus()">Focus</button>
</template>

<!-- Child -->
<script setup>
import { ref } from 'vue'
const inputRef = ref(null)

// 暴露方法给父组件
defineExpose({
  focus: () => inputRef.value?.focus(),
  clear: () => { /* ... */ }
})
</script>

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

// 组件 A
bus.emit('custom-event', data)

// 组件 B
import { onMounted, onUnmounted } from 'vue'
onMounted(() => bus.on('custom-event', handler))
onUnmounted(() => bus.off('custom-event', handler))

// store/user.js
import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', () => {
  const name = ref('')
  const setName = (n) => name.value = n
  return { name, setName }
})

// 任何组件
import { useUserStore } from '@/stores/user'
const userStore = useUserStore()
userStore.setName('Tom')