vue非父子组件间的通信

最新推荐文章于 2024-01-18 08:47:34 发布

原克技术

最新推荐文章于 2024-01-18 08:47:34 发布

阅读量97

点赞数

文章标签： vue vue.js javascript jquery html5

本文链接：https://blog.csdn.net/weixin_44432032/article/details/108693462

版权

非父子组件间的通信
非父子组件间的通信，可以通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件

var Event=new Vue();
Event.$emit(事件名,数据);
Event.$on(事件名,data => {});

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>非父子组件间的通信</title>
	<script src="js/vue.js"></script>
</head>
<body>
	<div id="itany">
		<my-a></my-a>
		<my-b></my-b>
		<my-c></my-c>
	</div>

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

	<template id="b">
		<div>
			<h3>B组件：{{age}}</h3>
			<button @click="send">将数组发送给C组件</button>
		</div>
	</template>
	
	<template id="c">
		<div>
			<h3>C组件：{{name}}，{{age}}</h3>
		</div>
	</template>

	<script>
		//定义一个空的Vue实例
		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 {
					name:'',
					age:''
				}
			},
			mounted(){ //在模板编译完成后执行
				Event.$on('data-a',name => {
					this.name=name;
					// console.log(this);
				});

				Event.$on('data-b',age => {
					this.age=age;
				});
			}
		}

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

原克技术

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue非父子组件间的通信

非父子组件间的通信非父子组件间的通信，可以通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件var Event=new Vue();Event.$emit(事件名,数据);Event.$on(事件名,data => {});<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>非父子组件间的通信</title&
复制链接

扫一扫