Как в composition api vue 3 использовать emit?

В Vue.js 3 с использованием Composition API мы можем использовать функцию inject для передачи emit, которая позволяет нам взаимодействовать с родительским компонентом.

Для того чтобы использовать emit, нам потребуется создать объект eventEmitter в родительском компоненте. Затем мы можем передать этот объект в дочерний компонент с помощью provide и inject.

Ниже приведен пример кода, который показывает, как использовать emit с Composition API в Vue.js 3:

// Родительский компонент
import { ref, provide } from 'vue';

export default {
  setup() {
    const eventEmitter = ref(null);
    
    provide('eventEmitter', eventEmitter); // передача объекта eventEmitter в дочерний компонент 

    const handleClick = () => {
      eventEmitter.value.emit('someEvent', 'some data'); // вызов события и передача данных
    };

    return {
      handleClick,
    };
  },
};

// Дочерний компонент 
import { inject } from 'vue';

export default {
  setup() {
    const eventEmitter = inject('eventEmitter'); // получение объекта eventEmitter из родительского компонента

    const handleEvent = (data) => {
      console.log(data); // вывод переданных данных из родительского компонента
    };

    eventEmitter.on('someEvent', handleEvent); // подписка на событие и указание обработчика

    return {
      handleEvent,
    };
  },
};

В этом примере, родительский компонент создает eventEmitter с помощью ref, затем передает его дочернему компоненту с помощью provide. Затем в дочернем компоненте, мы используем inject, чтобы получить доступ к eventEmitter.

В родительском компоненте создается handleClick функция, которая вызывает emit метод объекта eventEmitter. В дочернем компоненте создается handleEvent функция, которая слушает события, вызванные родительским компонентом.

Надеюсь, это помогло вам понять, как использовать emit с Composition API в Vue.js 3.