С Composition API в Vue 3 был введен новый подход к написанию компонентов, отличный от классовых компонентов в Vue 2. Использование $refs
с Composition API не так прямолинейно, как в опции API в Vue 2. Однако, есть несколько способов обратиться к функции через $refs
с использованием Composition API.
1. **Использование ref
**:
При объявлении переменной с помощью ref
в компоненте, можно обратиться к элементу или функции через value
. Вот пример:
<template> <div ref="myComponent"></div> </template> <script> import { ref, onMounted } from 'vue'; export default { setup() { const myComponent = ref(null); onMounted(() => { myComponent.value.innerHTML = 'Hello, World!'; }); return { myComponent }; } } </script>
В этом примере мы создали ref
с именем myComponent
, и после монтирования компонента мы можем обратиться к этому элементу через myComponent.value
.
2. **Использование $nextTick
**:
Если вам необходимо обратиться к DOM-элементам после их обновления Vue, можно использовать $nextTick
внутри компонента. Вот пример:
<template> <div ref="myComponent"></div> </template> <script> export default { mounted() { this.$nextTick(() => { this.$refs.myComponent.innerHTML = 'Hello, World!'; }); } } </script>
В этом примере мы используем this.$nextTick
для обращения к this.$refs.myComponent
после обновления Vue.
3. **Использование getCurrentInstance
**:
Иногда может потребоваться получить экземпляр Vue без использования this
. Вы можете использовать getCurrentInstance
для этого. Вот пример:
<template> <div ref="myComponent"></div> </template> <script> import { ref, getCurrentInstance } from 'vue'; export default { setup() { const myComponent = ref(null); const instance = getCurrentInstance(); instance.ctx.$nextTick(() => { myComponent.value.innerHTML = 'Hello, World!'; }); return { myComponent }; } } </script>
Здесь мы использовали getCurrentInstance
для получения экземпляра Vue без использования this
, и затем можем обращаться к $nextTick
через instance.ctx
.
Это основные способы обращения к функциям или элементам через $refs
в Vue 3 с использованием Composition API.