Как я могу обработать пользовательское дочернее событие, генерируемое с помощью этого. $ Emit, в родительском компоненте в пределах части <script>файла .vue?

Question

Мы используем vue и машинопись, поэтому наши файлы .vue организованы по существу идентично этому посту.

У меня есть дочерний компонент, генерирующий пользовательское событие changeType.Я хотел бы вызвать функцию на родительском компоненте после этого события.

childComponent.vue

<template>
  <div>
    <span @click="changeType('test')"></span>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class ChildComponent extends Vue {
  @Prop(
    {
      default: 'notTest',
      validator: (type) => {
        return [
          'test',
          'notTest',
        ].indexOf(type) > -1;
      },
    },
  )
  currentType!: string;

  changeType(currentType = 'notTest') {
    this.$emit('changeType', currentType);
  }
}
</script>

Теперь я не уверен, что поместить в мой файл parentComponent.vue , который имеет <childComponent /> в области template.

Документация Vue касается только обработки дочерних событий в области <template> файла с использованием v-on:

<blog-post
  ...
  v-on:enlarge-text="postFontSize += 0.1"
></blog-post>

Итак, я полагаю, мне нужно что-то вроде:

parentComponent.vue

<template>
  <childComponent v-on:changeType="handleChangeType" />
</template>

Или есть какой-то способ сделать это втолько область тега <script>?Исследование стало более сложным благодаря использованию синтаксиса class + typcript.У меня были некоторые проблемы с такими вещами, как this.$on, но для машинописного текста это совсем не понравилось, или, может быть, я поместил его в неправильный раздел класса (возможно, он принадлежит конструктору или тому подобное?)

Я родом из Backbone, поэтому я надеялся, что метод, подобный onChangeType, добавленный непосредственно в родительский компонент, автоматически обработает событие, хотя, возможно, это старая школа, и есть более новые и лучшие способы.

Как я могу обработать событие дочернего компонента в тегах родительского компонента в vue? Возможно ли без v-on в шаблоне?Я неправильно понимаю «правильный» способ сделать это?

Answer 1

Вы можете добавить прослушиватель событий к дочернему компоненту с помощью $on метода , который вы упомянули.

Сначала вам нужно добавить ref к дочернему компоненту в шаблоне:

<childComponent ref="child"/>

Затем, в хуке mounted, вы добавите слушателявот так:

mounted() {
  this.$refs.child.$on('changeType', this.handleChangeType);
}