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

定义

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

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

自定义事件的声明

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

// click点击事件的本质(vue是怎么操作的)
$emit('click', {
	clientX: '',
	clientY: '',
	target: dom元素
})
------------------------------------------------------------
// eg:
// 子组件通过定义事件child-msg的方式将msg传给父组件
// 子组件中有个button按钮，并为其添加click事件
<template>
	<button @click="deliver"></button>
</template>
<script>
	export default {
  	data(){
    	return {
      	msg: '我是子组件的数据'
      }
    },
    methods: {
    	// 按钮点击事件的处理函数
      // 当点击的时候使用$emit()触发事件，把message传给父组件
      deliver(){
      	this.$emit('child-msg', this.msg)
      }
    }
  }
</script>

---------------------------------------------------------------

// 父组件在使用子组件的时候，绑定子组件自定义的child-msg事件
<template>
	<Son @child-msg="getChildMsg"></Son>
</template>

<script>
export default {
	data(){
  	return {
    	message: ''		// 设置message来接收子组件的数据 (这里的值类型得根据需要传递的类型写)
    }
  },
  methods: {								// 通过回调函数来接收数据
  	getChildMsg(val){				// 定义形参val接收数据
    	this.message = val		// 将子组件传过来的数据转存到父组件
    }
  }
}
</script>

事件的绑定除了可以在标签中通过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修饰符

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

跋尾

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