Події компонентів ​

Ця сторінка передбачає, що ви вже прочитали основи компонентів. Прочитайте це спочатку, якщо ви новачок у компонентах.

Випромінювання та прослуховування подій ​

Компонент може випромінювати спеціальні події безпосередньо у виразах шаблону (наприклад, в обробнику v-on), використовуючи вбудований метод $emit:

<!-- MyComponent -->
<button @click="$emit('someEvent')">натиснути</button>

export default {
  methods: {
    submit() {
      this.$emit('someEvent')
    }
  }
}

Батьки можуть прослуховувати це за допомогою v-on:

<MyComponent @some-event="callback" />

Модифікатор .once також підтримується слухачами подій компонентів:

<MyComponent @some-event.once="callback" />

Подібно до компонентів і атрибутів, імена подій забезпечують автоматичне перетворення регістру. Зауважте, що ми створили подію camelCase, але можемо прослухати її за допомогою kebab-case слухача у батьківських компонентах. Як і у випадку з регістром імені реквізиту, ми радимо використовувати в шаблонах прослуховувачі подій kebab-case.

Аргументи події ​

Іноді корисно випромінювати конкретне значення з подією. Наприклад, ми можемо захотіти, щоб компонент <BlogPost> відповідав за те, на скільки збільшити текст. У таких випадках ми можемо передати додаткові аргументи в $emit, щоб надати це значення:

<button @click="$emit('increaseBy', 1)">
  Збільшити на 1
</button>

Тоді, коли ми прослуховуємо подію в батьківському компоненті, ми можемо використовувати вбудовану функцію-стрілку як прослуховувач, що дозволяє отримати доступ до аргументу події:

<MyButton @increase-by="(n) => count += n" />

Або, якщо обробником події є метод:

<MyButton @increase-by="increaseCount" />

Тоді значення буде передано як перший параметр цього методу:

methods: {
  increaseCount(n) {
    this.count += n
  }
}

function increaseCount(n) {
  count.value += n
}

Оголошення переданих подій ​

Компонент може явно оголосити події, які будуть випромінюватись за допомогою макросу defineEmits()параметр emits:

<script setup>
defineEmits(['inFocus', 'submit'])
</script>

<script setup>
const emit = defineEmits(['inFocus', 'submit'])

function buttonClick() {
  emit('submit')
}
</script>

export default {
  emits: ['inFocus', 'submit'],
  setup(props, ctx) {
    ctx.emit('submit')
  }
}

export default {
  emits: ['inFocus', 'submit'],
  setup(props, { emit }) {
    emit('submit')
  }
}

export default {
  emits: ['inFocus', 'submit']
}

Параметр emits і макрос defineEmits() також підтримують синтаксис об’єкта. Якщо ви використовуєте TypeScript, ви можете вводити аргументи, що дозволяє нам виконувати перевірку під час виконання корисного навантаження випущених подій:

<script setup>
const emit = defineEmits({
  submit(payload: { email: string, password: string }) {
    // повертає `true` або `false`, щоб вказати,
    // що перевірка пройшла/не пройшла
  }
})
</script>

<script setup lang="ts">
const emit = defineEmits<{
  (e: 'change', id: number): void
  (e: 'update', value: string): void
}>()
</script>

export default {
  emits: {
    submit(payload: { email: string, password: string }) {
      // повертає `true` або `false`, щоб вказати,
      // що перевірка пройшла/не пройшла
    }
  }
}

Незважаючи на те, що це необов’язково, рекомендується визначати всі випромінювані події, щоб краще задокументувати, як має працювати компонент. Це також дозволяє Vue виключати відомих слухачів із прохідних атрибутів, уникаючи крайніх випадків, спричинених подіями DOM, які вручну випромінюються стороннім кодом.

Перевірка подій ​

Подібно до перевірки типу реквізитів, подію можна перевірити, якщо її визначено за допомогою синтаксису об’єкта, а не синтаксису масиву.

Щоб додати перевірку, події призначається функція, яка отримує аргументи, передані в this.$emitemit викликає і повертає логічне значення, щоб вказати, подія дійсна чи ні.

<script setup>
const emit = defineEmits({
  // Без перевірки
  click: null,

  // Перевірка події надсилання
  submit: ({ email, password }) => {
    if (email && password) {
      return true
    } else {
      console.warn('Недійсні данні події надсилання!')
      return false
    }
  }
})

function submitForm(email, password) {
  emit('submit', { email, password })
}
</script>

export default {
  emits: {
    // Без перевірки
    click: null,

    // Перевірка події надсилання
    submit: ({ email, password }) => {
      if (email && password) {
        return true
      } else {
        console.warn('Недійсні данні події надсилання!')
        return false
      }
    }
  },
  methods: {
    submitForm(email, password) {
      this.$emit('submit', { email, password })
    }
  }
}

Події як реквізити ​

Ви також можете оголосити та передати events як props, додавши on перед назвою події з великої літери.

Використання props.onEvent має іншу поведінку, ніж використання emit('event'), оскільки перше передасть лише обробку прослухувача на основі властивості (@event або :on-event).

Через це рекомендується використовувати emit('event') замість props.onEvent під час випромінювання подій.