【Vue.js】自定义事件，全局事件总线，订阅与发布

最新推荐文章于 2024-05-04 22:23:25 发布

最好的人啊

最新推荐文章于 2024-05-04 22:23:25 发布

阅读量868

点赞数 2

分类专栏： Vue 文章标签： javascript 前端 vue.js 前端框架

本文链接：https://blog.csdn.net/qq_52499703/article/details/126366062

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

2，安装 pubsub：npm i pubsub-js

3，发布消息接收消息取消订阅将由下列代码展示

一，自定义事件

1 绑定事件

定义：子给父传递数据：通父组件给子组件绑定自定义事件

简单来讲就是：子组件通过自定义事件给父组件传递数据

2 @ 或 v-on

3 代码展示小案例

下面是父组件中的代码块

<template>
	<div id="app">
		<h1>{{msg}}</h1>
		<hr />
		<h2>班级信息：{{title}}</h2>
		<!-- 从子组件中拿到数据 绑定事件（给子组件绑定一个事件getName  showName是个回调函数） -->
		<Person @getName="showName"/>
		<!-- 当子组件调用这个自定义事件时（getName），就可以调用这个回调函数（showName） -->
	</div>

</template>

<script>
	import Person from './components/Person.vue';
	export default {
		name: 'app',
		data() {
			return {
				title: 'web2209',
				msg: '自定义事件'
			}
		},
		components: {
			Person
		},
		methods:{
			showName(name){//这个参数是子组件传的值
				console.log("App得到了姓名",name);
			}
		}
	}
</script>

<style>

</style>

接下来是子组件的代码块

<template>
	<div>
		姓名：{{name}},年龄：{{age}}
		<button @click="sendName">发送信息给父组件</button>
	</div>
</template>

<script>
	export default {
		name: 'Person',
		data() {
			return {
				name: '张三',
				age: 19
			}
		},
		methods: {//调用父组件中的自定义事件
			sendName() {
				this.$emit('getName',this.name)
			}
		},
	}
</script>

<style>
</style>

效果图

二，全局事件总线

作用：一种组件间通信的方式适用于任意组件间通信。

1 安装

安装全局事件总线:在入口文件main.js中，给VM添加$bus，任意组件都可以在原型中调用。

new Vue({
  render: h => h(App),
  //给VM添加$bus
  beforeCreate() {
  	Vue.prototype.$bus = this
  }
}).$mount('#app')

2 组件的使用

给全局事件总线，绑定自定义事件getName 谁需要接收数据就再谁绑定。

子组件①：LiSi中

<template>
	<div>
		姓名:{{name}} 年龄:{{age}}
		<button @click="sendName">发姓名到"张三"组件</button>
	</div>
</template>

<script>
	export default{
		name:'LiSi',
		data(){
			return{
				name:'李四',
				age: 20
			}
			
		},
		methods:{
			sendName(){
				this.$bus.$emit("getName",this.name)
			}
		},
		mounted() {
			this.$bus.$on("getAge",(age)=>{
				console.log("李四组件得到的age:",age);
			})
		}
	}
</script>

<style>
</style>

子组件②：ZhangSan中

注意：组件销毁之前卸载自定义事件

<template>
	<div>
		姓名:{{name}} 年龄:{{age}}
		<button @click="sendAge">发送年龄给"李四"组件</button>
		<button @click="estroyGetName">销毁getName</button>
		
	</div>
</template>

<script>

	export default{
		name:'ZhangSan',
		data(){
			return{
				name:'张三',
				age: 19
			}
			
		},
		mounted() {
			this.$bus.$on('getName',(name)=>{
				console.log("张三组件得到的name:",name);
			})
		},
		methods:{
			sendAge(){
				this.$bus.$emit("getAge",this.age)
			},
			estroyGetName(){
				this.$destroy();
			}
		},
		beforeDestroy() {
			// console.log('正在销毁中.....');
			this.$bus.$off();//销毁全部组件
			// this.$bus.$off("getName");//销毁getName
			// this.$bus.$off("getAge");//销毁getAge
		}
		
	}
</script>

<style>
</style>

父组件中的代码块为

<template>
	
	<div id="app">
		<ZhangSan/>
		<hr>
		<LiSi/>
	</div>

</template>

<script>
import ZhangSan from './components/ZhangSan.vue';
import LiSi from './components/LiSi.vue';
export default {
	name: 'app',
	data(){
		return{
		}
	},
	components:{
		ZhangSan,
		LiSi
	}
}
</script>

<style>

</style>

三，订阅与发布

1，含义

一种组件间通信的方式，适用于任意组件间通信，如今有很多消息订阅与发布的包，在这里只介绍一种，pubsub-js。

2，安装 pubsub：npm i pubsub-js

3，发布消息接收消息取消订阅将由下列代码展示

子组件①ClassInfor（班级信息）

<template>
	<div>
	班级：{{name}}
	<button @click="send">发布信息</button>
	</div>
</template>

<script>
	// 引入: import pubsub from 'pubsub-js'
	import pubsub from 'pubsub-js'
	export default{
		name:'ClassInfor',
		data(){
			return{
				name:'web2209',
			}
		},
		//发布
		methods:{
			send(){
				pubsub.publish('name',this.name) //第一个参数为 发布消息的名称，第二个参数：为发布内容
			}
		}
}
</script>

<style>
</style>

子组件② ZhangSan

<template>
	<div>
		姓名:{{name}} 年龄:{{age}}
		<button @click="mydestroy">销毁组件</button>
	</div>
</template>

<script>
	import pubsub from 'pubsub-js'
	export default{
		name:'ZhangSan',
		data(){
			return{
				name:'张三',
				age: 19
			}
		},
		// 接收 来自班级信息中 发布的数据
		mounted() {
		this.mypubsub =	pubsub.subscribe('name',(msg,data)=>{
				console.log("班级信息：",data); //每次接收消息的时，会生成一个订阅的ID
			} )
		},
		//销毁组件
		beforeDestroy() {
				pubsub.unsubscribe(this.mypubsub);
		},
		
		methods:{
			mydestroy(){
				this.$destroy();
			}
		}
	}
</script>

<style>
</style>

父组件

<template>
	<div id="app">
			<ClassInfor/>
			<hr>
			<ZhangSan/>
	</div>

</template>

<script>
	import ZhangSan from './components/ZhangSan.vue';
	import ClassInfor from './components/ClassInfor.vue';
	export default {
		name: 'app',
			data(){
				return{
			}
		},
			components:{
				ZhangSan,
				ClassInfor
			}	
}
</script>

<style>

</style>