vue——组件之间的通信

组件之间的通信

一、父组件调用子组件方法

1. vue3

使用defineExpose暴露子组件方法

// 父组件
<son ref="homeDashboardRef"/>

const homeDashboardRef = ref()
const beforeShow = () => {
  if (homeDashboardRef.value) {
    homeDashboardRef.value.getTodoData()
  }
}

// 子组件
const getTodoData = () => {...}
defineExpose({ getTodoData })  // 暴露方法

2. vue2

使用$ref

// 父组件
<son ref="homeDashboardRef"/>

const beforeShow = () => {
  this.homeDashboardRef?.getTodoData()
}

// 子组件
const getTodoData = () => {...}

二、子组件调用父组件方法

子组件可通过emits修改父组件数据

// 父组件
<son :tapHandler="getTodoData" />
function getTodoData(){}

// 子组件
<div @tap='handler'><div>

const emits = defineEmits(['tapHandler'])
function handler(data){
	// vue3
    emits('tapHandler', {data})
    // vue2
    this.$emit('tapHandler', {data})
}

三、全局事件总线$bus（非父子组件）

通过事件派发和事件监听实现跨组件通信（观察者模式）

// vue2
this.$bus.$on('事件名', ()=>{})  // 事件监听
this.$bus.emit('事件名',4 {参数})  // 事件派发
// vue3 使用mitt库
// 封装eventBus.js
import mitt from 'mitt';
const emitter = mitt();
export default emitter;
// 事件派发
emitter.emit('事件名', {参数});
// 事件监听
emitter.on('事件名', ()=>{})

四、消息订阅与发布（pubsub）

// 订阅消息
this.pubId = pubsub.subscribe('消息名', 回调方法) // 设置pubId方便取消订阅
// 发布消息
pubsub.publish('消息名', {数据})
// 取消订阅（beforeDestroy调用）
pubsub.unsubscribe(this.pubId);