Vue 3: Почему значение dom ref не определено при ссылке в шаблоне Vue 3

Question

Я использую бета-версию Vue 3 и пытаюсь получить доступ к ссылке в функции настройки, Мой компонент:

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://composition-api.vuejs.org/api.html#template -refs

Answer 2

Вам нужно передать значение ref, чтобы инициализировать его:

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

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