常用的组件通信方式

1.子父组件通信

在父组件中：使用v-model绑定响应式数据将其传递给child

const message = ref('') 
<son v-model='message'></son>

在子组件中：

1. 接收props

2. 声明emit

3. 实现双向绑定

// 接收props,默认名字为modelValue definePorps({ modelValue:String }) 
// 声明emit,里面方法默认是update:modelValue 
<button @click=handler()>实现绑定</button>

emit=defineEmit(['update:modelValue']]) 

cosnt hanlder = ()=>{
  emit('update:modelValue',$event)
}

2.跨组件通信

provide/inject 

pinia

localStorage

3.全局事件总栈（EventBus）

vue内所有组件都能接收

vue2中

new Vue({
  beforeCreate () { // 尽量早的执行挂载全局事件总线对象的操作，初始化EventBus
    Vue.prototype.$globalEventBus = this
},
}).$mount('#root')

// 具有四个方法
$on(eventName, listener): 绑定自定义事件监听
$emit(eventName, data): 分发自定义事件
$off(eventName): 解绑自定义事件监听
$once(eventName, listener): 绑定事件监听, 但只能处理一次