时间戳

首页 > 解决方案 > Vue 3：为什么在 Vue 3 模板中引用时 dom 引用值未定义

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

问题描述

我正在使用 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 的值是未定义的。我在这里做错了什么？

标签： javascriptvue.jsvue-componentvuejs3

解决方案

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

  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

推荐阅读