文章目录

• 自定义事件
• • 实现步骤
  • 将原生事件绑定到组件
• 改造TodoList为自定义事件

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

自定义事件

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

实现步骤

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

1. 第一种方式：使用v-on或@给子组件绑定自定义事件：若想让自定义事件只能触发一次，可以使用once修饰符
   或
   或
2. 第二种方式，利用ref属性，通过$onapi给子组件绑定自定义事件： ，一般会在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)}

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

把学生名给App

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

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

this.$off('demo')

解绑多个，有两种方式：

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

将原生事件绑定到组件

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

改造TodoList为自定义事件

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

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

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

第四步：在App组件解绑

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