Vue 3 Composition API как обратиться к функции через this.$refs?

С 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.