Atributo emits de Vue3

Vue3 选项式 APIAPI de opciones de Vue3

En Vue3,emitsEl atributo se utiliza para definir los eventos que un componente puede emitir.

emitsEs un array o un objeto, utilizado para declarar explícitamente qué eventos personalizados emitirá el componente.

Medianteemitsel atributo, los desarrolladores pueden gestionar mejor los eventos de los componentes y mejorar la legibilidad y mantenibilidad del código.

¿Por qué usar el atributo emits?

En Vue2, el componente padre a través dev-onescucha los eventos del componente hijo, mientras que el componente hijo a través de$emitel método emite los eventos. Aunque esta forma es simple y directa, a medida que crece el tamaño del proyecto, la gestión de eventos puede volverse caótica. Vue3 introduceemitsel atributo, que tiene los siguientes beneficios:

  1. Declaración clara de eventos: medianteemitsel atributo, los desarrolladores pueden saber claramente qué eventos emitirá el componente.
  2. Legibilidad del código: al revisar en el componenteemitsel atributo, se puede comprender rápidamente las interacciones de eventos del componente.
  3. Verificación de tipos y advertencias: si el evento emitido no está enemitsla declaración, Vue mostrará una advertencia en modo desarrollo, ayudando a los desarrolladores a detectar problemas potenciales.

¿Cómo usar el atributo emits?

1. Uso básico

En el componente,emitspuede ser un array, en el que se enumeran los nombres de todos los eventos personalizados.

Ejemplo

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

En el ejemplo anterior,emitsel array declaraupdate:modelValueysubmitdos eventos. Cuando se llama athis.$emit('submit', 'Form submitted!'), se emite elsubmitevento, y se pasan los datos'Form submitted!'。

2. Uso de objeto

emitsTambién puede ser un objeto. Las claves del objeto son los nombres de los eventos, y los valores son funciones de validación. La función de validación se utiliza para verificar si los parámetros del evento pasado son válidos.

Ejemplo

<script>
export default {
  emits: {
    submit: (payload) => {
      if (typeof payload === 'string') {
        return true;
      } else {
        console.warn('Submit event payload must be a string!');
        return false;
      }
    }
  },
  methods: {
    handleClick() {
      this.$emit('submit', 'Form submitted!');
    }
  }
}
</script>

En este ejemplo,submitla función de validación del evento verifica sipayloades una cadena. Si no lo es, se mostrará un mensaje de advertencia en la consola.

3. Uso combinado con v-model

emitsEl atributo se utiliza a menudo junto conv-modelv-model, especialmente para manejar el enlace bidireccional en componentes personalizados.

Ejemplo

<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>

En este ejemplo, cuando el valor del campo de entrada cambia, se emite elupdate:modelValueevento, y el nuevo valor se pasa al componente padre.

Notas

  1. Mayúsculas y minúsculas en nombres de eventos: Los nombres de eventos en Vue no distinguen entre mayúsculas y minúsculas, pero se recomienda usar la convención de nomenclatura kebab-case (separada por guiones).
  2. Valor de retorno de la función de validación: si la función de validación devuelvefalse, Vue emitirá una advertencia en modo desarrollo, pero el evento aún se emitirá.
  3. Eventos predeterminados: Algunos eventos nativos (comoclick) no necesitan estaremitsdeclarados, a menos que necesites validar sus parámetros.

Vue3 选项式 APIAPI de opciones de Vue3

Otras extensiones