如何在Vue3中使用createVNode传递跨组件方法？

Question

在vue3中使用createVNode挂载组件，组件本身的有一个需要传递一个跨组件的方法，如何把这个方法传给祖父组件。

// 被挂载的组件A
<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import mitt from 'mitt'

const emit = defineEmits(['configurationAckAlarm'])

// 确认告警
const ackedAlarm = (id: number, alarm: Alarm) => {
    let alarmData = JSON.parse(JSON.stringify(alarm))
    emit('configurationAckAlarm', alarmData)
}
</script>

// 挂载方法
const alarmInfoWindow = {}
let timer = null
/**
 * @param e 鼠标事件对象
 */
export function createAlarmInfoWindow(el, alarm) {
    const configMitt = mitt()

    const instance = createVNode(AlarmInfoWindow, {
        onConfigurationAckAlarm: (alarm) => {
            // 这样写外部无法接受到此方法
            configMitt.emit('handleConfigurationAckAlarm', alarm)
        }
    })

    e.target.onmouseleave = () => {
        closeAlarmInfoWindow(alarm)
    }

    instance.appContext = app._context
    render(instance, document.body)
    instance.el['onmouseover'] = () => {
        if (timer) clearTimeout(timer)
    }
    instance.el['onmouseleave'] = () => {
        closeAlarmInfoWindow(alarm)
    }

    alarmInfoWindow[alarm.id] = instance
    instance.remove = () => {
        document.body.removeChild(instance.el)
        render(null, document.body)
    }

    return instance.el
}

export function closeAlarmInfoWindow(alarm) {
    timer = setTimeout(() => {
        if (alarmInfoWindow[alarm.id]) {
            alarmInfoWindow[alarm.id].remove()
            delete alarmInfoWindow[alarm.id]
        }
    }, 300)
}

// 调用挂载方法的组件B
const showAlarmInfo = (event: MouseEvent, item) => {
    createAlarmInfoWindow(event, item)
}

// 组件B的父组件-组件C，也就是需要实现handleConfigurationAckAlarm，即configurationAckAlarm
const configMitt = mitt()
onMounted(() => {
    configMitt.on('handleConfigurationAckAlarm', (alarm) => {
// 监听不到组件A传来的方法
    })
})

组件C如何才能监听到组件A的configurationAckAlarm方法。

test

Answer 1

1.在组件B中传递事件处理函数：

// 调用挂载方法的组件B
const showAlarmInfo = (event: MouseEvent, item) => {
    createAlarmInfoWindow(event, item, handleConfigurationAckAlarm)
}

// 组件B的父组件-组件C
const configMitt = mitt()

const handleConfigurationAckAlarm = (alarm) => {
    configMitt.emit('handleConfigurationAckAlarm', alarm)
}

onMounted(() => {
    configMitt.on('handleConfigurationAckAlarm', (alarm) => {
        // 监听到组件A传来的方法
        console.log('Received alarm:', alarm)
    })
})

2.修改createAlarmInfoWindow函数以接受事件处理函数：

export function createAlarmInfoWindow(el, alarm, handleConfigurationAckAlarm) {
    const configMitt = mitt()

    const instance = createVNode(AlarmInfoWindow, {
        onConfigurationAckAlarm: (alarm) => {
            // 传递事件处理函数
            handleConfigurationAckAlarm(alarm)
        }
    })

    el.onmouseleave = () => {
        closeAlarmInfoWindow(alarm)
    }

    instance.appContext = app._context
    render(instance, document.body)
    instance.el.onmouseover = () => {
        if (timer) clearTimeout(timer)
    }
    instance.el.onmouseleave = () => {
        closeAlarmInfoWindow(alarm)
    }

    alarmInfoWindow[alarm.id] = instance
    instance.remove = () => {
        document.body.removeChild(instance.el)
        render(null, document.body)
    }

    return instance.el
}