Vue 3：为什么在 Vue 3 模板中 ref 时 dom ref 值未定义

Question

我正在使用 Vue 3 beta 版本，我正在尝试访问设置函数中的 ref，我的组件：

JS（Vue）：

const Child = createComponent({
  setup () {
    let tabs = ref()
    console.log(tabs)
    return {}
  },
  template: '<div ref="tabs" >Wow</div>'
})

演示：https://jsfiddle.net/xkeyLwu4/2/

但是tabs.value的值是未定义的。我在这里做错了什么？

Answer 1

1. 您需要让

   setup()

   返回具有相同名称的引用。

2. 安装后才能记录 DOM 结果(

   onMounted

   )

const Child = createComponent({
  setup () {
    let tabs = ref()
    onMounted(() => console.log(tabs.value))
    return { tabs }
  },
  template: '<div ref="tabs" >Wow</div>'
})

请参阅文档以获取更多示例：https://vuejs.org/guide/essentials/template-refs.html

Answer 2

您需要将一个值传递给 ref 才能初始化它：

let tabs = ref([tab1, tab2, ...])

console.log(tabs) // tabs.value is now [tab1, tab2, ...]