javascript - Vue 3 : Why dom ref value is undefined when ref in Vue 3 template

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

你需要有setup()返回具有相同名称的 ref。

在挂载 (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