Свойство emits в Vue3

Vue3 选项式 APIVue3 Options API

В Vue3,emitsсвойство используется для определения событий, которые компонент может инициировать.

emitsЭто массив или объект, используемый для явного объявления пользовательских событий, которые компонент будет инициировать.

Черезemitsсвойство, разработчики могут лучше управлять событиями компонентов и повышать читаемость и удобство сопровождения кода.

Зачем использовать свойство emits?

В Vue2 родительский компонентv-onпрослушивает события дочернего компонента, а дочерний компонент использует$emitметод для вызова событий. Хотя этот подход прост и прямолинеен, по мере роста масштаба проекта управление событиями может стать хаотичным. Vue3 вводитemitsсвойство, которое имеет следующие преимущества:

  1. Явное объявление событий: Благодаряemitsсвойству разработчики могут ясно понимать, какие события будет вызывать компонент.
  2. Читаемость кода: В компоненте, просмотрemitsсвойства позволяет быстро понять взаимодействие событий компонента.
  3. Проверка типов и предупреждения: Если вызываемое событие не объявленоemitsв нем, Vue выдаст предупреждение в режиме разработки, помогая разработчикам обнаружить потенциальные проблемы.

Как использовать свойство emits?

1. Базовое использование

В компоненте,emitsэто может быть массив, перечисляющий имена всех пользовательских событий.

Пример

<script>
export default {
  emits: ['update:modelValue', 'submit'],
  methods: {
    handleClick() {
      this.$emit('submit', 'Form submitted!');
    }
  }
}
</script>

В примере выше,emitsмассив объявляетupdate:modelValueиsubmitдва события. При вызовеthis.$emit('submit', 'Form submitted!')это вызываетsubmitсобытие и передаёт данные'Form submitted!'。

2. Использование объекта

emitsЭто также может быть объект, ключи которого — имена событий, а значения — функции валидации. Функция валидации используется для проверки, являются ли переданные параметры события допустимыми.

Пример

<script>
export default {
  emits: {
    submit: (payload) => {
      if (typeof payload === 'string') {
        return true;
      } else {
        console.warn('Полезная нагрузка события Submit должна быть строкой!');
        return false;
      }
    }
  },
  methods: {
    handleClick() {
      this.$emit('submit', 'Form submitted!');
    }
  }
}
</script>

В этом примере,submitфункция проверки для события проверяетpayloadявляется ли оно строкой. Если нет, она выведет предупреждающее сообщение в консоль.

3. В сочетании с v-model

emitsЭто свойство часто используетсяv-modelвместе с v-model, особенно при обработке двусторонней привязки в пользовательских компонентах.

Пример

<template>
  <input :value="modelValue" @input="updateValue" />
</template>

<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  methods: {
    updateValue(event) {
      this.$emit('update:modelValue', event.target.value);
    }
  }
}
</script>

В этом примере, когда значение поля ввода изменяется, это запускаетupdate:modelValueсобытие и передаёт новое значение родительскому компоненту.

Меры предосторожности

  1. Чувствительность имён событий к регистру: Имена событий в Vue нечувствительны к регистру, но рекомендуется использовать именование в kebab-case (через дефис).
  2. Возвращаемое значение функции проверки: Если функция проверки возвращаетfalsefalse, Vue выдаст предупреждение в режиме разработки, но событие всё равно будет вызвано.
  3. События по умолчанию: Некоторые нативные события (такие какclickclick) не нужноemitsобъявлять, если только вам не нужно проверять их параметры.

Vue3 选项式 APIVue3 Options API

Другие расширения