[JavaScript知识库]vue组件-全局事件总线||消息订阅与发布

开始

• 当我们父给子组件传递东西的时候，可以直接通过props配置项传递
• 但是子给父传递东西该怎么传递？

子组件通过props函数给父组件传递数据

• 我们可以由父组件通过props传递一个函数给子组件
• 子组件通过函数的参数给父组件数据
• 但是倘若父级的层级关系太多的时候，这样就显得不太合理了

全局事件总线

• 我们通过给所有vm和vc都看得到的地方，添加一个对象，这个对象专门用于给vm，vc通过函数参数的方式传递数据
• 因此，我们再vm的原型身上添加一个对象$bus

添加方法：

在main文件中

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

使用方法

1. 在我们想要得到数据的组件中，绑定自定义事件

mounted(){
	this.$bus.&on('事件名称',(传递的参数)={
				......
	})
}

2. 在我们想要传递参数的组件中，触发自定义事件

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

消息订阅与发布

• 类似于全局事件总线
• 需要引入包【可npm下载】