持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天，点击查看活动详情

小前言

紧接上篇，又遇到了很多喜羊羊and美羊羊说感觉Vue的自定义事件不是很清楚，这次就来说一说自定义事件 自定义事件其实也是组件通信的一种方式，适用于子组件向父组件传输数据例如子组件向给父组件传输数据，那么就要在父组件中给子组件绑定自定义事件

graph TD
绑定事件 --> 触发事件--> 解绑事件

1. 绑定自定义事件的两种方式

第一种，在父组件中

<Demo @事件名='方法'/>或者<Demo v-on：事件名='方法'/>

第二种方式，在父组件中

this.$refs.demo.$on('事件名',方法)

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

2.触发自定义事件

this.$emit('事件名'，数据)

3. 解绑自定义事件方法

this.off('事件名')

组件上也可以绑定原生的dom事件，需要使用native修饰符@click.native='show'上面绑定自定义事件，即使绑定的是原生事件也会被认为是自定义的，需要加native，加了后就将此事件给组件的根元素

注意通过this.$refs.xxx.$on('事件名'，回调函数)绑定自定义事件时，回调函数要么配置在methods中，要么用箭头函数，否则this指向会出问题

让我们继续看一下实战代码

1. 在父组件绑定用ref绑定让我们可以获得实例的对象 然后在父组件的mounted(),里面使用this.$refs.xxx.$on('自定义事件名'，this.接受数据的函数名)

<template>
  <div id="app">
   <UserDefined ref='mutton'/>
  </div>
</template>

<script>
import UserDefined from './components/UserDefined.vue'

export default {
  name: 'app',
  components: {
	UserDefined
  },
  methods:{
	lal(name){
		console.log('俺是app俺接收到了数据：',name)
	}  
  },
  mounted(){
	this.$refs.mutton.$on('hh',this.lal)
  }
}
</script>

2. 在子组件绑定一个点击事件，然后在methods里面用this.$emit('自定义事件名',需要传输的数据)

<template>
	<div>
		<h4>姓名：{{name}}</h4>
		<h4>性别：{{gender}}</h4>
		<h4>年龄：{{age}}</h4>
		<button  @click="clFn">点击把姓名给父组件app.vue</button>
	</div>
</template>

<script>
	export default{
		data() {
			return{
				name:"美羊羊",
				gender:"女",
				age:"88"  
			}
		},
		methods:{
			clFn(){
				this.$emit('hh',this.name)
			}
		}
	}
</script>

效果展示