javascript - 在vue3中，先使用createVNode创建vnode，然后使用render函数挂载到dom上面，怎样才能获取到该元素的引用ref?

Question

定义一个InputCom.vue文件，文件内容为

<template>  <input ref="refEl" /></template><script lang="ts" setup>import { ref, defineExpose } from 'vue'const refEl = ref()defineExpose({  test() {    console.log("0-----test-----0")  },  refEl})</script>然后定义一个测试文件Test.vue，内容为<template>  <div ref="refEl"></div></template><script lang="ts" setup>import { ref, createVNode, render, defineExpose, onMounted } from 'vue'import InputCom from './InputCom.vue'const refEl = ref(null)const refInputCom = ref(null)// 必须动态创建// 必须动态创建// 必须动态创建const vnode = createVNode(InputCom, {ref:refInputCom})render(vnode, refEl.value)onMounted(() => {  // 调用InputCom.vue中暴露出来的方法    })</script>

在Test.vue中如何调用到InputCom.vue文件中暴露出来的方法以及引用，经过多次测试，发现使用render函数会导致获取到的refInputCom.value为undefined，请问该如何编写代码才能正确动态创建InputCom并可以正常调用该组件暴露出来的方法和属性

Answer 1

首先createVNode的第二个参数接收组件的props，从你的示例代码中看到{ref:refInputCom}，实际上等于在InputCom组件中的defineProps声明了一个ref属性，上层组件传递了refInputCom给ref。放弃defineExpose写法，我们依靠defineProps来获取到子组件内的方法,详细代码如下

// InputCom let props = defineProps({  init:Function})function funA(){  console.log("asa");}function funB(){  console.log("bb");}onMounted(()=>{  props.init({funA,funB})})// Test.vueimport { createVNode,render } from "vue";let events = {};let vnode = createVNode(HelloWorld,{init(e){  events = e;}});events.funA();events.funB();