Vue 3 refs 在渲染函数中未定义

Question

我有一个简单的 Vue 组件，根元素为 ref="divRef"。但是，在 onMounted 函数中，divRef.value returns 未定义。任何帮助将不胜感激。

import { defineComponent, onMounted, ref, Ref, h } from "vue"

export default defineComponent({
    setup(props, context) {
        const divRef = ref() as Ref<HTMLElement>

        onMounted(() => {
            console.log(divRef.value) // undefined
        })

        return () => {
            return h(
                "div",
                {
                    ref: "divRef"
                },
                "This is a div"
            )
        }
    }
})

Answer 1

如果您尝试访问

div 元素，默认情况下没有 value 属性 "This is a div" （div 中的文本） 你应该像这样使用 innerText 属性: divRef.innerText.

更新

根据 docs，您必须将 ref 本身作为 return 元素中的 ref 传递才能访问 Vue 3 中的 $el。所以您的代码应该是像这样：

return () => {
  return h(
    "div", {
      ref: divRef
    },
    "This is a div"
  )
}

Answer 2

在您的 render 函数中，传递 divRef 本身，而不是字符串：

return h(
    "div",
    {
        //ref: "divRef"   // DON'T DO THIS
        ref: divRef
    },
    "This is a div"
)

Answer 3

如果您在渲染函数中使用 jsx。您还需要传递 divRef 本身，不能通过字符串传递。

set() {
  const divRef = ref() as Ref<HTMLElement>

  return () => <div ref={divRef}></div>
}

Vue 3 refs 在渲染函数中未定义

Vue 3 refs is undefined in render function

javascript

typescript

vue.js

vuejs3

更新