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

  • Z时代
  • 2024-02-17
  • 分类：IT

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>

回答：

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

以上是 vue 3.0 setup语法糖中使用h()中ref属性取值dom为null？ 的全部内容， 来源链接： utcz.com/p/932827.html

回到顶部