非父子组件间传值——Bus/总线机制

最新推荐文章于 2022-03-06 00:01:17 发布

荒糖落

最新推荐文章于 2022-03-06 00:01:17 发布

阅读量169

点赞数

分类专栏： vue 文章标签： vue html5

本文链接：https://blog.csdn.net/weixin_44561961/article/details/117574727

版权

vue 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue应用中使用Bus（总线）机制，通过实例演示了如何通过原型链挂载bus实例，以及如何利用$emit和$on实现组件间的事件传递与监听。理解并实践这种发布订阅模式有助于构建模块化的前端应用。

摘要由CSDN通过智能技术生成

前言

提示：以下是本篇文章正文内容，下面案例可供参考

一、Bus

示例：Bus的总线机制，将事件挂载到vue的的属性上在这里插入图片描述

二、使用步骤

1.引入库

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Bus/总线机制/发布订阅模式/观察者模式</title>
	</head>
	<body>
		<div id="root">
			<chlid content="dell"></chlid>
			<chlid content="li"></chlid>
		</div>
		<script src="js/vue.js"></script>
		<script type="text/javascript">
			Vue.prototype.bus = new Vue()//把vue上的prototype挂载一个bus的属性指向一个实例
			//之后所有的new Vue()定义的事件或组件都会挂载bus这个属性
			
			Vue.component('chlid',{
				data:function(){//定义复制一个子组件自己用的content并返回一个对象来解除警报
					return{
						selfContent:this.content
					}
				},
				props:{
					content:String
				},
				template:'<div @click="handleClick">{{selfContent}}</div>',
				methods:{
					handleClick:function(){
						this.bus.$emit('change', this.selfContent)//通过bus属性触发传递事件
					}
				},
				mounted:function(){//触发当bus被挂载后的生命周期钩子
					var this_ =this//保存this
					this.bus.$on('change',function(msg){//监听bus触发的监听事件change，然后进行下一个事件
						this_.selfContent = msg//赋值两个一样
					})
				}
			})
			var vm = new Vue({
				el:"#root",
				
			})
		</script>
	</body>
</html>