自定义事件-全局事件总线-消息订阅与发布

最新推荐文章于 2025-05-28 19:34:53 发布

奋斗的小泉

最新推荐文章于 2025-05-28 19:34:53 发布

阅读量109

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/m0_58813731/article/details/128413709

版权

本文详细介绍了Vue组件间通信的各种方式，包括使用props、自定义事件、全局事件总线（PubSubJS）进行数据传递。强调了组件通信的基本原则，如不要直接修改父组件状态，并给出了具体的代码示例，展示了如何在不同组件间进行数据交互。同时，提到了解绑事件和使用消息订阅发布系统进行跨组件通信的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自定义事件

起步

组件间通信基本原则
不要在子组件中直接修改父组件的状态数据
数据在哪, 更新数据的行为(函数)就应该定义在哪
vue 组件间通信方式
props
vue 的自定义事件
全局事件总线
消息订阅与发布(如: pubsub 库)
slot
vuex

props

使用组件标签时

<my-component name='tom' :age='3' :set-name='setName'></my-component>

定义MyComponent 时
在组件内声明所有的props
方式一: 只指定名称


props: ['name', 'age', 'setName']

方式二: 指定名称和类型

props: {
name: String,
age: Number,
setNmae: Function
}

方式三: 指定名称/类型/必要性/默认值

props: {
name: {type: String, required: true, default:xxx},
}

自定义事件

1.绑定事件监听

// 方式一: 通过v-on 绑定
@delete_todo="deleteTodo"
// 方式二: 通过$on()
this.$refs.xxx.$on('delete_todo', function (todo) {
this.deleteTodo(todo)
})

2. 触发事件

// 触发事件(只能在父组件中接收)
this.$emit(eventName, data)

案例：

3.3 示例

之前都是这样绑定事件监听父组件传递给子组件

<TodoHeader :addTodo="addTodo" />
变成
<TodoHeader @addTodo="addTodo" />
或者这样
<TodoHeader ref="header" />

mounted(){// 异步执行代码
// 给<header>绑定addTodo事件监听
// this.$on('addTodo', this.addTodo) // 给App绑定监听，不对的
this.$refs.header.$on('addTodo', this.addTodo)
}

子组件触发事件

this.addTodo(todo); // demo2中的代码
变成
this.$emit('addTodo', todo)

注意：此方式只用于子组件向父组件发送消息(数据)问题: 隔代组件或兄弟组件间通信此种方式不合适

解绑：

		unbind(){
				this.$off('atguigu') //解绑一个自定义事件
				// this.$off(['atguigu','demo']) //解绑多个自定义事件
				// this.$off() //解绑所有的自定义事件
			},
			death(){
				this.$destroy() //销毁了当前Student组件的实例，销毁后所有Student实例的自定义事件全都不奏效。
			}

总结
一种组件间通信的方式，适用于：子组件 ===> 父组件

使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。

绑定自定义事件：

第一种方式，在父组件中：<Demo @atguigu="test"/>或 <Demo v-on:atguigu="test"/>

第二种方式，在父组件中：

<Demo ref="demo"/>
......
mounted(){
this.$refs.xxx.$on('atguigu',this.test)
}

若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。
触发自定义事件：this.$emit(‘atguigu’,数据)
解绑自定义事件this.$off(‘atguigu’)
组件上也可以绑定原生DOM事件，需要使用native修饰符。

 <student @click.native="show"></student>

注意：通过this.$ refs.xxx.$on(‘atguigu’,回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！（谁触发事件，this指向就是谁）

全局事件总线

一种组件间通信的方式，适用于任意组件间通信。
安装全局事件总线：

new Vue({
......
beforeCreate() {
Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
},
......
})

使用事件总线：
（1）接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。

methods(){
  demo(data){......}
}
......
mounted() {
  this.$bus.$on('xxxx',this.demo)
}

（2）提供数据：this.$ bus.$ emit(‘xxxx’,数据)
4. 最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。
案列：
main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	beforeCreate() {
		Vue.prototype.$bus = this //安装全局事件总线
	},
})

Student.vue

<template>
	<div class="student">
		<h2>学生姓名：{{name}}</h2>
		<h2>学生性别：{{sex}}</h2>
		<button @click="sendStudentName">把学生名给School组件</button>
	</div>
</template>

<script>
	export default {
		name:'Student',
		data() {
			return {
				name:'张三',
				sex:'男',
			}
		},
		mounted() {
			// console.log('Student',this.x)
		},
		methods: {
			sendStudentName(){
				this.$bus.$emit('hello',this.name)
			}
		},
	}
</script>

<style lang="less" scoped>
	.student{
		background-color: pink;
		padding: 5px;
		margin-top: 30px;
	}
</style>

School.vue

<template>
	<div class="school">
		<h2>学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
	</div>
</template>

<script>
	export default {
		name:'School',
		data() {
			return {
				name:'尚硅谷',
				address:'北京',
			}
		},
		mounted() {
			// console.log('School',this)
			this.$bus.$on('hello',(data)=>{
				console.log('我是School组件，收到了数据',data)
			})
		},
		//要解绑
		beforeDestroy() {
			this.$bus.$off('hello')
		},
	}
</script>

<style scoped>
	.school{
		background-color: skyblue;
		padding: 5px;
	}
</style>

消息订阅与发布(PubSubJS 库)

1.订阅消息

PubSub.subscribe('msg', function(msg, data){})

2 发布消息

PubSub.publish('msg', data)

3 示例

订阅消息（绑定事件监听）

import PubSub from 'pubsub-js'

export default {
	mounted () {
		// 订阅消息(deleteTodo)
		PubSub.subscribe('deleteTodo', (msg, index) => {
		this.deleteTodo(index)
		})
	}
}

发布消息（触发事件）

// 发布消息(deleteTodo)
PubSub.publish('deleteTodo', this.index)

注意
优点: 此方式可实现任意关系组件间通信(数据)
事件的2 个重要操作
绑定事件监听(订阅消息)
目标: 标签元素
事件名(类型): click/focus
回调函数: function(event){}
触发事件(发布消息)
DOM 事件: 用户在浏览器上对应的界面上做对应的操作
自定义: 编码手动触发

使用步骤：

安装pubsub：npm i pubsub-js

引入: import pubsub from ‘pubsub-js’

接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。

methods(){
  demo(data){......}
}
......
mounted() {
  this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息
}

提供数据：pubsub.publish('xxx',数据)
最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去取消订阅。

<template>
	<div class="school">
		<h2>学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
	</div>
</template>

<script>
	import pubsub from 'pubsub-js'
	export default {
		name:'School',
		data() {
			return {
				name:'尚硅谷',
				address:'北京',
			}
		},
		mounted() {
			// console.log('School',this)
			/* this.$bus.$on('hello',(data)=>{
				console.log('我是School组件，收到了数据',data)
			}) */
			this.pubId = pubsub.subscribe('hello',(msgName,data)=>{
				console.log(this)
				// console.log('有人发布了hello消息，hello消息的回调执行了',msgName,data)
			})
		},
		beforeDestroy() {
			// this.$bus.$off('hello')
			pubsub.unsubscribe(this.pubId)
		},
	}
</script>

<style scoped>
	.school{
		background-color: skyblue;
		padding: 5px;
	}
</style>

<template>
	<div class="student">
		<h2>学生姓名：{{name}}</h2>
		<h2>学生性别：{{sex}}</h2>
		<button @click="sendStudentName">把学生名给School组件</button>
	</div>
</template>

<script>
	import pubsub from 'pubsub-js'
	export default {
		name:'Student',
		data() {
			return {
				name:'张三',
				sex:'男',
			}
		},
		mounted() {
			// console.log('Student',this.x)
		},
		methods: {
			sendStudentName(){
				// this.$bus.$emit('hello',this.name)
				pubsub.publish('hello',666)
			}
		},
	}
</script>

<style lang="less" scoped>
	.student{
		background-color: pink;
		padding: 5px;
		margin-top: 30px;
	}
</style>