14 Vue 非父子组件间的传值 bus/总线/发布订阅模式/观察者模式使用和总结_vue 发布订阅模式和父子组件传值一样吗-CSDN博客

本文链接：https://blog.csdn.net/davice_li/article/details/127487286

一、父子组件之间的传递数据如下图

二、跨级组件间的传递就不行了。在叶子之间传递数据也是会出现问题如下图

这时就需要引入一起工具或者设计模式就可以解决这个问题了。

我们上节讲到了父子组件的传递，大致是这样的代码如下：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>非父子组件间传值（bus/总线/发布订阅模式/观察者模式）</title>
		<script src="../vue.js"></script>
		
	</head>
	<body>
		<div id="app">
			<child content="dell"></child>
			<child content="lee"></child>
		</div>

		<script type="text/javascript">
			Vue.component('child',{
				props:{
					content:String
				},
				template:'<div>{{content}}</div>'

			})
			var vm = new Vue({
				el: "#app"

			})
		</script>

	</body>
</html>

二、我们实现一个功能，在点击 Dell 时，lee 也变成 dell 。当点击 lee 时，dell 变成 lee

这时，就是兄弟之间的组件传值的方式了。上代码：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>非父子组件间传值（bus/总线/发布订阅模式/观察者模式）</title>
		<script src="../vue.js"></script>
		
	</head>
	<body>
		<div id="app">
			<child content="dell"></child>
			<child content="lee"></child>
		</div>

		<script type="text/javascript">
			Vue.prototype.bus = new Vue()
			Vue.component('child',{
				data:function() {
					return {
						//接过 父组件传递过来的content属性
						selfContent: this.content
					}
				},
				props:{
					content:String
				},
				template:'<div @click="handleDivClick">{{selfContent}}</div>',
				methods: {
					handleDivClick:function() {
						// alert("handleDivClick")
						//向外触发change事件
						this.bus.$emit('change',this.selfContent)
					}
				},
				//组件生命周期的钩子mounted函数
				mounted: function() {
					var this_ = this;
					//监听bus 的 change事件，发生监听事件就执行以下函数，兄弟组件之间的传递值
					this.bus.$on('change',function(msg) {
						// alert(msg)
						//改变兄弟组件之间的值传递
						this_.selfContent = msg
					})
				}

			})
			var vm = new Vue({
				el: "#app"

			})
		</script>

	</body>
</html>