使用Vue事件总线（EventBus）实现统计组件传参

最新推荐文章于 2024-05-03 17:36:34 发布

LAAAAaaaaaaaaaaaaa

最新推荐文章于 2024-05-03 17:36:34 发布

阅读量208

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/Zac_123456/article/details/129032839

版权

1. 如何使用EventBus

首先需要创建事件总线并将其导出，以便其它模块可以使用或者监听它。我们可以通过两种方式来处理。先来看第一种，新创建一个 .js 文件，比如 event-bus.js

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

接下来需要做到的就是在你的组件中加载它，并且调用同一个方法，就如在父子组件中互相传递消息一样

2. 发送事件

<template>
	<view>
		<button @click="topageB">topageB</button>
	</view>
</template>

<script>
	import {EventBus} from '../../event-bus.js'
	export default {
		name:"eventBusA",
		methods:{
			topageB(){
				EventBus.$emit("topageB",'传递数据给B页面')
			}
		},
		data() {
			return {
				
			};
		},
	}
</script>

<style lang="less">

</style>

3. 接收事件

<template>
	<view>
		
	</view>
</template>

<script>
	import {EventBus} from '../../event-bus.js'
	export default {
		name:"eventBusB",
		data() {
			return {
				
			};
		},
		mounted(){
			EventBus.$on("topageB",(data) => {
				console.log(data);
			})
		}
	}
</script>

<style>

</style>