Evento personalizado del componente Vue

El clic, la tecla arriba, el mouseout, etc. que vienen con JS son todos eventos integrados. se utilizan para elementos html.

Los eventos personalizados son utilizados por los componentes y son adecuados para pasar datos de componentes secundarios a componentes principales.

Hay dos formas para que los componentes secundarios pasen datos a los componentes principales:

La primera forma: a través de accesorios.

La segunda forma: a través de eventos personalizados

Pasar datos de componentes secundarios a componentes principales a través de accesorios

Pasos de implementación:

1. Primero defina una función en los métodos de la aplicación del componente principal (necesita recibir un parámetro) y vincule esta función a la etiqueta del componente secundario
2. Reciba esta función a través de la declaración de accesorios en el componente secundario y defina un evento de clic
3. Escriba la función de evento en los métodos del subcomponente y pase los datos a través de este.

Ejemplo de código:

Código de componente de la aplicación:

    //给子组件绑定函数  
    <School :getSchoolName="getSchoolName"/>

    //定义一个接收参数的函数
    methods: {
        getSchoolName(name){
        console.log('app收到了学校名',name)
        }
    }

Código de subcomponente:

  //定义一个click事件
  <button @click="sendSchoolName">把学校名字给app</button>

  //声明接收父组件函数
  props:['getSchoolName'],

  //调用事件函数并传参
  methods: {
    sendSchoolName(){
      this.getSchoolName(this.name)
    }
  }

Pasar datos de componentes secundarios a componentes principales a través de eventos personalizados

Dos formas de vincular eventos personalizados: usar v-on o usar ref

enlace v-on

Pasos de implementación:

1. Primero pase v-on a la etiqueta del componente secundario: nombre de evento personalizado = "nombre de la función", vincule una función y luego defina esta función en los métodos de la aplicación del componente principal (necesita recibir un parámetro)
2. En el subcomponente, primero defina un evento de clic, luego escriba la función de evento de clic en los métodos y use $this.$emit() para activar el evento personalizado en el componente de la aplicación. El primer parámetro entre paréntesis es el auto Definir el evento nombre, y los siguientes parámetros son datos (nota: qué subcomponente está vinculado al evento personalizado irá a qué subcomponente desencadenará el evento)
3. Defina la función que desencadena esta función en los métodos del subcomponente y pase los datos a través de este.

Ejemplo de código:

Código de componente de la aplicación:

    //给子组件绑定函数  
    <Student v-on:self="incident"/>

    //定义一个接收参数的函数
    methods: {
        incident(name){
        console.log('app收到了学生名',name)
        }
    }

Código de subcomponente:

  //定义一个click事件
  <button @click="sendStudentName">把学生名字给app</button>

  //调用事件函数，通过$this.$emit()去触发APP组件里面的自定义事件
  methods: {
     sendStudentName(){
       this.$emit('self',this.name)
     }
  }

enlace de referencia

Pasos de implementación:

1. Primero, use el enlace de referencia para la etiqueta del componente secundario en el componente principal para que podamos obtener el objeto de instancia del componente.
2. En el componente principal, agregue el elemento de configuraciónmounted(), que usa this.$refs.Instance object.$on('Custom atributo name', this. Function name for receive data)
3. El código dentro del componente secundario no cambia

Ejemplo de código:

Código de componente de la aplicación:

    //给子组件绑定函数  
    <Student ref="student"/>

    //定义一个接收参数的函数
    methods: {
        incident(name){
        console.log('app收到了学生名',name)
        }
    }

    //绑定自定义事件
    mounted() {
      this.$refs.student.$on('self',this.incident)
    }

Código de subcomponente:

  //定义一个click事件
  <button @click="sendStudentName">把学生名字给app</button>

  //调用事件函数，通过$this.$emit()去触发APP组件里面的自定义事件
  methods: {
     sendStudentName(){
       this.$emit('self',this.name)
     }
  }

Desvincular eventos personalizados

• Desvincular un evento personalizado: this.$off('nombre del evento personalizado')
• Desvincular varios eventos personalizados: this.$off(['nombre de evento personalizado 1','nombre de evento personalizado 2'])
• Desvincular todos los eventos personalizados: this.$off()

---

Aviso

• Al vincular un evento personalizado a través de this.$refs.xxx.$on('nombre de evento personalizado', devolución de llamada), la devolución de llamada debe configurarse en métodos o usar una función de flecha, de lo contrario, ¡esto causará problemas!
• Los componentes también se pueden vincular a eventos DOM nativos y se debe usar el modificador nativo.
• Si desea que un evento personalizado se active solo una vez, puede usar el modificador una vez o el método $once.