Что такое DefineExpose во Vue 3

Ответ

defineExpose — это функция в Vue 3 Composition API, которая позволяет явно указать, какие свойства или методы компонента должны быть доступны извне через ref.

По умолчанию, в <script setup> все переменные и методы инкапсулированы. Если нужно, чтобы родительский компонент мог их использовать, их нужно "экспонировать".

Пример:

<script setup>
import { ref } from 'vue';

const internalValue = ref('Секретно');
const publicMethod = () => alert('Доступно снаружи!');

defineExpose({
  publicMethod,
  value: internalValue
});
</script>

Родительский компонент:

<template>
  <ChildComponent ref="childRef" />
</template>

<script setup>
import { ref, onMounted } from 'vue';
const childRef = ref(null);

onMounted(() => {
  childRef.value.publicMethod(); // Работает
  console.log(childRef.value.value); // 'Секретно'
});
</script>

Без defineExpose доступ к internalValue и publicMethod был бы невозможен.