三十一、组件的自定义事件

（一）应用

• 一种组件间通信的方式，适用于 子组件===>父组件
• 因为只能写在调用组件的组件标签上，所以必然是父子组件关系

（二）使用场景

• A 是父组件，B 是子组件，B 想给 A 传数据
• 那么就要在 A 中给 B 绑定自定义事件
• 事件的回调在 A 中定义

（三）绑定自定义事件

1.方式一

<!-- 在父组件中： -->
<Demo @atguigu="test" />
<!-- 或 -->
<Demo v-on:atguigu="test" />

2.方式二

<!-- 在父组件中： -->
<Demo ref="demo" />

mounted() {
  this.$refs.demo.$on("atguigu", this.test);
}

• 若想让自定义事件只能触发一次，可以使用 once 修饰符，或 $once 方法

（四）触发自定义事件

this.$emit("atguigu", 数据);

（五）解绑自定义事件

this.$off("atguigu");

（六）绑定原生事件

• 组件上也可以绑定原生 DOM 事件
• 需要使用 native 修饰符

（七）注意

• 通过 this.$refs.xxx.$on("atguigu", 回调) 绑定自定义事件时，回调 要么配置在 methods 中，要么用回调函数
• 否则 this 指向会从当前组件的组件实例对象变为使用该组件的组件实例对象