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

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

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

Компонент може випромінювати спеціальні події безпосередньо у виразах шаблону (наприклад, в обробнику 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() підтримують синтаксис об’єкта, який дозволяє виконувати перевірку даних випромінюваних подій:

<script setup>
const emit = defineEmits({
  submit(payload) {
    // повертає `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) {
      // повертає `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 })
    }
  }
}