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

    文章目录

    基本用法

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

    • 1
    • 2
    • 使用$emit发布事件 - 传递值
    import eventBus from '@/utils/eventBus.js'
eventBus.$emit('bus','hello')

    • 1
    • 2
    • 使用$on订阅事件 - 接收组件值
    import eventBus from '@/utils/eventBus.js'
eventBus.$on('bus', msg => {
	console.log(msg)  // 'hello'
}

    • 1
    • 2
    • 3
    • 4

    使用案例

    • 示例：
    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>
		
		<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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 运行结果：点击首页后显示的数据
      在这里插入图片描述
  • 相关阅读:
    【C++】map和set——树形结构的关联式容器
    软件测试 - 测试基础知识梳理
    助老服务机器人结构设计
    [附源码]计算机毕业设计springboot交通事故档案管理系统
    阿里云国际版建立云端数据库操作流程
    从零开始打造个性化生鲜微信商城小程序
    备战金九银十，java中高级核心知识全面解析，让你吊打面试官
    四川轻化工大学计算机考研资料汇总
    2023.11.17使用flask将多个图片文件上传至服务器
    Python ML实战-工业蒸汽量预测02-数据探索
  • 原文地址：https://blog.csdn.net/qq_45677671/article/details/126059212