Vue学习笔记2 -- 组件自定义事件

组件自定义事件

这是一种组件间通信的方式，适用于：子组件===》父组件

一. 给组件绑定自定义事件

1.第一种绑定方法

<Student v-on:myevent="demo"/>
<Student @:myevent="demo"/>

• <Student> 是Vue当中的一个组件
• 给Student组件的实例对象（vc)绑定一个myevent事件，如果myevent事件被触发，将会调用demo()函数
• 你给谁绑定的事件，就找谁触发该事件
• 触发Student组件实例身上的myevent事件，可以传递参数给父组件中在demo函数

# Student组件
this.$emit('myevent',this.name)

2. 第二种绑定方法

// ref 指向组件实例
<Student ref="student"/>

• ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。

//当组件加载完成后，调用生命周期函数mounted()
mounted() {
     //绑定自定义事件
	this.$refs.student.$on('myevent',this.getStudentName)
	 //绑定自定义事件（一次性）
	this.$refs.student.$once('myevent',this.getStudentName)
},

二、给组件解绑自定义事件

unbind(){
	this.$off('myevent') //解绑一个自定义事件
	// this.$off(['myevent1','myevent2']) //解绑多个自定义事件,参数是一个数组
	// this.$off() //解绑所有的自定义事件
},

销毁当前组件的实例，所有的自定义事件全都不奏效

death(){
   this.$destroy() //销毁了当前Student组件的实例，销毁后所有Student实例的自定义事件全都不奏效。
}

组件绑定的事件默认是自定义事件

// 系统把下面的click事件看成是自定义事件，需要组件触发
<Student ref="student" @click="show"/>

//系统把下面的click事件看成是原生DOM事件
<Student ref="student" @click.native="show"/>

组件内只能有一个根元素，否则会报错