Vue组件自定义事件

子组件给父组件传递消息
Student 组件向App组件共享数据。
通过自定义事件方式。

方式一

• App.vue
  绑定自定义事件

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

methods: {
	getStudentName(name){
		console.log('App收到了学校名：',name)
	}
}

• Student.vue
  触发自定义事件

//触发Student组件实例身上的myclick事件
this.$emit('getStudentName',this.name)

方式二

使用ref

• App.vue

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

mounted() {
	this.$refs.student.$on('demo',this.getStudentName) //绑定自定义事件
	// this.$refs.student.$once('demo',this.getStudentName) //绑定自定义事件（一次性）
},

解绑事件

this.$off('getStudentName') //解绑一个自定义事件
this.$off() //解绑所有