[Vue] vue学习笔记(11): 自定义事件 & 全局事件总线-526互联

组件的自定义事件

通过props可以将信息传递给子组件，那么当子组件需要向上传递信息的时候呢, 除了使用props传递函数类的方法，我们还可以用自定义事件

通过父组件给子组件绑定一个事件someEvent

// App.vue
<Student @someEvent='getStudentName' />

// methods
methods: {
	getStudentName(name, ...params){
		console.log("Data received by App: ", name, params)
	}
}

?name, ...params的写法是为了区分传入的参数，...params会返回一个列表 i.e. getSth('alice', 90, 10, 73) -> name = 'alice', params = [90, 10, 73]

触发组件实例里的自定义事件

<!--Student.vue - template-->
<button @click='doSomething'>Send Student's Name<button>

// Student.vue - methods
methods: {
	doSomething() {
	// func getStudentName(name, ...params) called
		this.$emit('someEvent', this.name, 90, 10, 77)
	}
}

原生事件

使用native标签，vue就可以识别组件上的原生DOM事件

<Student @someEvent='getStudentName' @click.native='showSomething'/>

全局事件总线 globalEventBus

全局事件总线类似于自定义事件，触发事件的对象变成了根组件Root，也就是vm实例对象本身

全局事件总线并不是对所有情况都是必需，通常自定义事件和props就可以解决问题，但在某些情况下会有用处，例如跨代传输数据

案例说明：App与MyItem组件之间传输数据，但它们中间有一个MyList组件，数据必须通过它，即使MyList根本不需要这些；这种情况下就可以考虑使用全局事件总线

创建vm并绑定

// main.js
new Vue({...
	beforeCreate() {
		Vue.prototype.$bus = this
	}
})

绑定以及解绑事件对应的方法

// App.vue
// method definitions above 
mounted() {
	this.$bus.$on('checkTodo', this.checkTodo)
	this.$bus.$on('deleteTodo', this.deleteTodo)
}, 
beforeDestroy() {
	this.$bus.$off('checkTodo')
	this.$bus.$off('deleteTodo')
}

触发事件

// MyItem.vue
handleCheck(id) {
	this.$bus.$emit('checkTodo', id)
}

handleDelete(id) {
	if (confirm('Want to Remove?')) {
		this.$bus.$emit('deleteTodo', id)
	}
}

PS. handleCheck & handleDelete是触发事件函数, checkTodo & deleteTodo是事件逻辑函数 >>> 大概就是这个意思?