eventos de componentes vue

1. ¿Qué es un evento componente?

Descubriremos que a veces los componentes secundarios necesitan interactuar con los componentes principales. Cuando se activa el evento del componente secundario, el componente principal puede manejarlo en consecuencia.

2. Eventos desencadenantes

1. En la expresión de plantilla del componente, puede usarlo directamente $emit 方法para activar un evento personalizado (por ejemplo: en v-onla función de controlador de):

<!-- MyComponent -->
<button @click="$emit('someEvent')">click me</button>

2. $emit() 方法También está this.$emit()disponible en instancias de componentes en la forma:

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

3. Monitoreo de eventos

Los componentes principales pueden v-on (缩写为 @)escuchar eventos a través de:

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

Nota: aquí activamos un evento nombrado en el formulario, pero puede usar el formulario para escuchar camelCaseen el componente principal . kebab-caseAl igual que el formato de caso de utilería, también recomendamos utilizar el formato de caso de kebab para escribir oyentes en plantillas.

4. Parámetros del evento

Se puede desencadenar un evento con un valor específico adjunto.

ejemplo:

<!-- 子组件 -->
<button @click="$emit('increaseBy', 1)">
  Increase by 1
</button>

<!-- 父组件1 箭头函数 -->
<MyButton @increase-by="(n) => count += n" />

<!-- 父组件2 方法 -->
<MyButton @increase-by="increaseCount" />

Explicación: Todo lo entrante $emit()se 额外参数pasará directamente a 监听器.