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

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

您需要将一个值传递给 ref 以对其进行初始化：

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

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

Answer 2

您需要 setup() return 一个同名的 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

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

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

javascript

vue.js

vue-component

vuejs3