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. 在挂载 ( onMounted)之前，您无法记录 DOM 结果

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

有关更多示例，请参阅文档：https : //composition-api.vuejs.org/api.html#template-refs