【Vue】通过事件发布订阅实现跨组件传值

最新推荐文章于 2022-12-08 16:27:43 发布

一颗不甘坠落的流星

最新推荐文章于 2022-12-08 16:27:43 发布

阅读量362

点赞数

分类专栏： Vue 全家桶文章标签： vue.js 前端跨组件传值

本文链接：https://blog.csdn.net/qq_45677671/article/details/126059212

版权

Vue 全家桶专栏收录该内容

32 篇文章 47 订阅

订阅专栏

文章目录

- 基本用法
- 使用案例

基本用法

这种通过创建一个空的 vue 实例的方式，相当于创建了一个事件中心或者说是中转站，用来传递和接收事件。
这种方式同样适用于任何组件间的通信，包括父子、兄弟、跨级，对于通信需求简单的项目比较方便.
但对于更复杂的情况，或者项目比较大时，可以使用 vue 提供的更复杂的状态管理模式 Vuex 来进行处理。

创建全局空Vue实例：eventBus.js文件

import Vue from 'vue';
export default new Vue();

使用$emit发布事件 - 传递值

import eventBus from '@/utils/eventBus.js'
eventBus.$emit('bus','hello')

使用$on订阅事件 - 接收组件值

import eventBus from '@/utils/eventBus.js'
eventBus.$on('bus', msg => {
	console.log(msg)  // 'hello'
}

使用案例

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<mycontent></mycontent>
			<myfooter></myfooter>
		</div>
		<template id="footer">
			<ul class="nav">
				<li @click="goContent('home')">首页</li>
				<li @click="goContent('list')">分类</li>
				<li @click="goContent('cart')">购物车</li>
				<li @click="goContent('me')">我的</li>
			</ul>
		</template>
		<template id="content">
			<div class="con">内容页显示的数据是：{{text}}</div>
		</template>
		<!-- 引入vue插件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			//兄弟节点间传参 eventbus
			//1.创建bus
			var bus = new Vue();
			//子组件
			//底部导航组件
			var myfooter = {
				template: '#footer',
				methods: {
					goContent(type) {
						//2.发送数据
						//参数：1.自定义事件名；2.要传递的参数
						bus.$emit('myevent', type);
					}
				}
			}
			//内容显示组件
			var mycontent = {
				data() {
					return {
						text: ""
					}
				},
				template: '#content',
				//挂载后的钩子
				mounted() {
					//3. 接收数据
					bus.$on('myevent', (data) => {
						console.log(data);
						this.text = data;
					});
				}
			}
			// 声明vue的对象
			var app = new Vue({
				el: "#app", // 将vue对象挂载到dom节点
				data: { // 定义vue对象的数据

				},
				components: {
					myfooter,
					mycontent
				}
			})
		</script>
	</body>
</html>

运行结果：点击首页后显示的数据

一颗不甘坠落的流星

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
【Vue】通过事件发布订阅实现跨组件传值

这种通过创建一个空的 vue 实例的方式，相当于创建了一个事件中心或者说是中转站，用来传递和接收事件。这种方式同样适用于任何组件间的通信，包括父子、兄弟、跨级，对于通信需求简单的项目比较方便，但对于更复杂的情况，或者项目比较大时，可以使用 vue 提供的更复杂的状态管理模式 Vuex 来进行处理...
复制链接

扫一扫