Связи между компонентом и слотом во Vue 3

В отношениях родитель-ребенок-слот содержимому слота ребенок может передавать пропсы, как указано во Vue.js документации:

<!-- <MyComponent> template -->
<div>
  <slot :text="msg"></slot>
</div>

<MyComponent v-slot="{ text }">
  {{ text }}
</MyComponent>

Часто нужно и событие из слота переслать в ребенка. Напрямую сделать это нельзя, но можно также пропсом передать слоту ссылку на метод в ребенке, который тот и вызовет по событию:

<!--   FormField   -->
<script setup>
const touched = ref(false);
</script>

<template>
  <div class="form-field">
    <slot :touch="() => { touched = true }" />
    ...    
  </div>
</template>

<!-- использование -->
<FormField v-slot="{ touch }">
  <BaseInput @input="touch()" />
</FormField>

Этот хак бывает очень полезен и не выходит за рамки правила: "Пропсы вниз, события вверх".

Источник