（三十一）Vue之自定义事件

Vue学习目录

上一篇：（三十）Vue之回顾本地存储webStorage

下一篇：（三十二）Vue之全局事件总线

自定义事件

自定义事件一种组件间通信的方式，适用于：子组件 ===> 父组件
例如：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。

实现步骤

第一步：给子组件绑定自定义事件，这里有两种方式

1. 第一种方式：使用v-on或@给子组件绑定自定义事件：若想让自定义事件只能触发一次，可以使用once修饰符
   <Demo @demo="test"/>或 <Demo v-on:demo="test"/>
<Demo @demo.once="test"/>或 <Demo v-on:demo.once="test"/>
2. 第二种方式，利用ref属性，通过$onapi给子组件绑定自定义事件： <Demo ref="demo"/>，一般会在mounted这个钩子绑定， $on里传两个参数，第一个为事件名，第二个为回调函数
   若想让自定义事件只能触发一次，可以使用$once方法。

mounted(){
      this.$refs.demo.$on('demo',this.test)
      //this.$refs.demo.$once('demo',this.test)//只会触发一次
   }

注意：
1.通过this.$refs.xxx.$on('xxx',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！
2.once修饰符和$once方法只能选一个使用

第二步：定义回调，回调定义在父组件中

test(name){
      console.log('父组件收到学校名：',name)
    }

第三步：在子组件中设置触发

<button @click="sendStudentName">把学生名给App</button>

sendStudentName(){
        //触发Demo组件实例身上的demo事件
        this.$emit('demo','清华大学')
      }

第四步：通常为了减少资源消耗，一般会在beforeDestroy钩子解绑自定义事件
解绑一个：

this.$off('demo')

解绑多个，有两种方式：

• 使用数组方式this.$off(['demo1','demo2',...])
• 不传参数，直接解绑所有自定义事件this.$off()

将原生事件绑定到组件

有时候我们想给子组件绑定原生世界，<Demo@click="show"/>，这样绑定是没有效果的，需要使用native修饰符，<Demo@click.native="show"/>,这样绑定vue才会使用原生事件，不然默认会进行自定义事件的绑定

改造TodoList为自定义事件

我们把Footer组件与App组件的交互从props改为自定义事件
第一步：在App组件里给Footer组件绑定自定义事件

        <Footer :todos="todos" @checkAllTodo="checkAllTodo" @clearAllTodo="clearAllTodo"/>

第二步：定义回调，这个回调之前已经定义好了，直接调用即可
第三步：在Footer组件定义触发

methods:{
    clearAll(){
      this.$emit('clearAllTodo')
    }
  }

第四步：在App组件解绑

  beforeDestroy() {
    this.$off('clearAllTodo')
  }