Как правильно слушать событие в Vue 3 с использованием TS?

В Vue 3 с использованием TypeScript (TS) для правильного прослушивания событий вы можете использовать декоратор @ из пакета vue-class-component.

Для начала установите пакет vue-class-component, выполнив команду:

npm install vue-class-component

Затем создайте новый компонент и импортируйте декоратор @ из vue-class-component и необходимые классы из Vue:

import { Vue, Component, Emit, Prop } from 'vue-property-decorator';
import HelloWorld from '@/components/HelloWorld.vue';

@Component
export default class MyComponent extends Vue {
  @Prop() myProp!: string;
  
  myEvent(): void {
    // Обработка события
  }

  @Emit()
  myEmitEvent(): string {
    // Возврат значения для события
    return 'Hello from emit!';
  }

  render() {
    return (
      <div>
        <HelloWorld message={this.myProp} />
        <button onClick={this.myEvent}>Click me</button>
        <button onClick={this.myEmitEvent}>Emit event</button>
      </div>
    );
  }
}

В примере выше мы создали компонент MyComponent с использованием декоратора @Component. Мы также импортировали классы Vue, Component, Emit и Prop из vue-class-component.

Декоратор @Prop() используется для определения пропса компонента. В данном случае мы определяем пропс myProp, который используется для передачи значения в дочерний компонент HelloWorld.

Декоратор @Emit() используется для определения события, которое будет генерироваться из компонента в ответ на определенное действие. В данном случае мы определяем метод myEmitEvent, который будет возвращать строку "Hello from emit!" при вызове события.

В методе myEvent мы определяем обработчик события для кнопки "Click me". Вы можете добавить необходимую логику обработки события внутри этого метода.

В методе render мы отображаем компонент HelloWorld, передавая ему значение пропса myProp. Мы также отображаем две кнопки - одну для вызова метода myEvent, а другую для вызова метода myEmitEvent.

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