vue进阶篇 - 组件的自定义事件on和ref「这是我参与11月更文挑战的第29天，活动详情查看：2021最后一次更文挑

「这是我参与11月更文挑战的第29天，活动详情查看：2021最后一次更文挑战」。

上一篇简单的和大家介绍了关于浏览器的本地储存功能，在本篇我会给大家介绍一下关于vue中组件的自定义事件。

什么是自定义事件呢？那就是和JavaScript的内置事件的事件就比如点击事件和键盘事件等等都是JavaScript搞定好的事件我们是直接用就可以了自定义事件就是区别于这些常规事件的事件，功能更加对于我们开发更大的帮助，所以本篇我会和大家讲讲关于自定义事件，本次的自定义事件是给组件事件的下面看我们的代码演示：

<template>
	<div class="app">
		<h1>{{msg}}，学生姓名是:{{studentName}}</h1>

		<!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
		<School :getSchoolName="getSchoolName"/>

		<!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用@或v-on） -->
		<!-- <Student @atguigu="getStudentName" @demo="m1"/> -->

		<!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第二种写法，使用ref） -->
		<Student ref="student" @click.native="show"/>

	</div>
</template>

<script>
	import Student from './components/Student'
	import School from './components/School'

	export default {
		name:'App',
		components:{School,Student},
		data() {
			return {
				msg:'你好啊！',
				studentName:''
			}
		},
		methods: {
			getSchoolName(name){
				console.log('App收到了学校名：',name)
			},
			getStudentName(name,...params){
				console.log('App收到了学生名：',name,params)
				this.studentName = name
			},
			m1(){
				console.log('demo事件被触发了！')
			},
			show(){
				alert(123)
			}
		},
		mounted() {
			this.$refs.student.$on('atguigu',this.getStudentName) //绑定自定义事件
			// this.$refs.student.$once('atguigu',this.getStudentName) //绑定自定义事件（一次性）
			},
	}
</script>

自定义事件绑定完成后通过this. $emit方式调用事件，前段时间我和大家讲过通过v-bind的方式传递数据现在的自定义事件是通过v-on：xxx的方式来绑定还有一种是ref的方式绑定自定义事件；（注意v-bind是穿的函数，v-on:才是事件的绑定；）v-bind需要配合props来接收数据和函数，而v-on：绑定的自定义事件是可以直接通过this.$ emit的方式触发事件；

需要解除绑定事件的通过this. $off的方式解绑事件；（注意this.$ off的传参很重要）

总结组件的自定义事件

一种组件间通信的方式，适用于：< strong style="color:red">子组件 ===> 父组件< /strong>
使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（< span style="color:red">事件的回调在A中< /span>）。
绑定自定义事件：
1. 第一种方式，在父组件中：<Demo @atguigu="test"/> 或 <Demo v-on:atguigu="test"/>
2. 第二种方式，在父组件中：
```
<Demo ref="demo"/>
......
mounted(){
   this.$refs.xxx.$on('atguigu',this.test)
}
```
3. 若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。
触发自定义事件：this.$emit('atguigu',数据)
解绑自定义事件this.$off('atguigu')
组件上也可以绑定原生DOM事件，需要使用native修饰符。
注意：通过this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！

以上就是本期的组件的自定义事件使用的教程，大家回头自己去实践一下，会掌握的更加深刻，