vue中使用bus总线在非父子组件之间传值

100 阅读 0 评论 66 点赞

我是靠谱客的博主积极星星，最近开发中收集的这篇文章主要介绍vue中使用bus总线在非父子组件之间传值，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

使用bus总线可以在兄弟父子祖先和后代组件之间传值

原理：在Vue原型中创建一个bus属性，让每一个组件（实例）都具有这个属性

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>bus总线</title>
//这里自行引入 vue
		<script src="js/vue221.js"></script>
	</head>
	<body>
		<template id="zzb1">
			<div>我是zzb1 <button @click="changeCount()">传值</button></div>
		</template>
		<template id="zzb2">
			<div>
				我是zzb2
				<p>{{count}}</p>
			</div>
		</template>
		<div id="app">
			<zzb1></zzb1>
			<zzb2></zzb2>
		</div>
		<script>
			//操作zzb1 改变zzb2中内容
			//非父子关系，无法直接使用props和emit
			//bus总线：在整个Vue原型中添加一个监听
			//vuex
			Vue.prototype.bus = new Vue(); //1.在Vue原型中 创建一个bus属性 ，挂载一个新的vue实例  做监听和事件响应
			Vue.component("zzb1", {
				template: "#zzb1",
				data() {
					return {
						count: 2
					};
				},
				methods: {
					changeCount() {
						//2-触发一个事件响应 去更改zzb2，中的值
						//利用bus属性添加一个对应的响应
						this.bus.$emit("fun", this.count);
					}
				}
			});
			//3-在zzb2创建完成添加一个bus监听 ： mounted中添加监听
			Vue.component("zzb2", {
				template: "#zzb2",
				data() {
					return {
						count: 1
					};
				},
				methods: {
					change() {
						console.log(1);
					}
				},
				mounted() {
					// console.log("zzb2创建 完成")
					//箭头函数  内部this指向 用于等于其产生环境
					// let that=this
					this.bus.$on("fun", (count) => {
						//this对应是 this.bus
						console.log(this);
						this.count = count;
					});
				}
			});
			let vm = new Vue({
				el: "#app"
			});
		</script>
	</body>
</html>