冇事来学系--Vue2.0中自定义事件

---

theme: simplicity-green

「这是我参与2022首次更文挑战的第11天，活动详情查看：2022首次更文挑战」

定义

一种组件之间通信的方式，适用于子传父

使用场景：父组件A，子组件B，B想给A传递数据，就要在A中使用B的时候绑定自定义事件(自定义事件在B中定义触发；绑定事件时的回调函数在A中定义，且要设置形参来接收B传来的数据)

自定义事件的声明

$emit('事件名称', 需要传递的参数 )

```js // click点击事件的本质(vue是怎么操作的) $emit('click', { clientX: '', clientY: '', target: dom元素

})

// eg: // 子组件通过定义事件child-msg的方式将msg传给父组件 // 子组件中有个button按钮，并为其添加click事件

---

// 父组件在使用子组件的时候，绑定子组件自定义的child-msg事件

```

---

事件的绑定除了可以在标签中通过v-on绑定之外，还可以通过ref属性获取到相应的元素，然后在生命周期钩子mounted( )中通过this.$refs.xxx.$on('事件名称', 回调函数) 进行绑定 。

注意此时的回调函数必须写在当前组件的methods节点中，或者使用箭头函数，这样回调函数的this才会指向当前组件的实例对象，才能操作到当前组件里面的data。

若直接在$on( )方法中声明回调函数，则里面的this指向的是事件的触发者，即绑定事件的那个组件实例对象或者DOM元素

事件的解绑

this.$off('事件名')解绑一个自定义事件

this.$off(['事件1', '事件2']) 解绑多个自定义事件

this.$off( )解绑所有的自定义事件(不传递参数)

---

注意

1. 在生命周期钩子中的销毁阶段，使用$destroy( )销毁组件实例，则它身上所有的自定义事件都会失效，但是原生的DOM事件仍然有效
2. 在组件上也可以绑定原生DOM事件，但是需要在绑定的时候加上native修饰符

js <Children @click.native="show"></Children>

---

跋尾

本篇内容就到这里了~ 我是Zeus👩🏻‍🚀来自一个互联网底层组装员，下一篇再见！ 📖