vue 3.0 setup语法糖中使用h()中ref属性取值dom为null?

template中 render局部渲染

<script setup>
import { h } from 'vue'

    const vNode =  h(
      ElForm,
      {
        class: {'question-page--mimheight' : true },
        model: formParamsData,
        ref: (el) => ruleFormRef = el,
        scrollToError: true,
        labelPosition: "top"
      },
      {
        default: () => h(
          'div',
          {
            class: 'question-list__wrap'
          },
          questionData.questionsList.map((subItem, subIndex) => {
            return h(
              "div", 
              { key: subIndex }, 
              fetChildrenNode(subItem, subIndex)
            ) 
          })
        ) 
      }
    )
</script>
<template>
    <vNode/>
</template>
预期:h() 中的 ref 可以取到 elForm 对象,调用 validate 方法。
实际:h() 中的 ref 无法拿到值,试过 nextTick , setTimeout 都不可以。
查找解决办法:
相关资料说 h() 是渲染时的,ref是作为渲染结果创建的,不可以在渲染时使用 ref.
思考:
我理解为在 dom 挂载前(渲染中)不能使用 ref 。
但为什么在挂载后的生命周期里依然拿不到?
是因为局部使用 render 函数的原因,还是因为 ref 属性的绑定和收集 ($refs)是在 render 函数调用前执行的?
下面将尝试把 render 渲染拆出来写,排除一下问所在
解决方法:
一 , 把 ref 添加在 template 模版中的 vNode 标签上
<template>
<vNode :ref='(el) => ruleFormRef = el'></vNode>
</template>
阅读 3k
1 个回答

为什么要执着于这种写法呢:ref='(el) => ruleFormRef = el'
我感觉ref命名是对于组件外部父组件设置对象关联子组件用的,感觉你写法就有问题,直接
const vNode = h(这种写法输出的是一个HTML片段而不是一个组件对象,你放vue里的时候,你的编辑器没报错吗

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题