非父子组件相互传参(发布订阅)

最新推荐文章于 2022-06-28 20:02:30 发布

卡姿兰大长腿

最新推荐文章于 2022-06-28 20:02:30 发布

阅读量95

点赞数

本文链接：https://blog.csdn.net/weixin_46382477/article/details/108114874

版权

vue 专栏收录该内容

59 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>非父子组件间的通信</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<!-- A组件和 B组件向C组件发送数据  ，在C组件里负责订阅 监听 ，A， B组件负责发送 $emit-->
	<div id="app">
		<my-a></my-a>
		<my-b></my-b>
		<my-c></my-c>
	</div>

	 <template id="a">
		<div>
			A组件：{{name}}
			<button type="button" @click="send">将数据发送给C组件</button>
		</div>
	 </template>
	 <template id="b">
		<div>
			B组件：{{age}}
			<button type="button" @click="send">将数据发送给C组件</button>
		</div>
	 </template>

	 <template id="c">
		<div>
			<h3>C组件：
				{{name1}}，{{age}}
			</h3>
		</div>
	</template>

	<script>

	var Event = new Vue();
		
	var A={
			template:'#a',
			data(){
				return {
					name:'tom'
				}
			},
			methods:{
				send(){
					Event.$emit('data-a',this.name)
				}
			}
		}
		var B={
			template:'#b',
			data(){
				return {
					age:20
				}
			},
			methods:{
				send(){
					Event.$emit('data-b',this.age)
				}
			}
		}
		var C={
			template:'#c',
			data(){
				return {
					name1:'',
					age:''
				}
			},
			mounted(){ //在模板编译完成后执行
				Event.$on('data-a',name=>{
					this.name1 = name
				})
				Event.$on('data-b',age=>{
					this.age = age
				})
			}
		}


		var vm=new Vue({
			el:'#app',
			components:{
				'my-a':A,
				'my-b':B,
				'my-c':C
			}
		});	
	</script>
</body>
</html>