020_Vue非父子组件之间数据交互

最新推荐文章于 2024-09-13 14:34:15 发布

自由与束缚JavaJavaScript

最新推荐文章于 2024-09-13 14:34:15 发布

阅读量422

点赞数

分类专栏： vue 文章标签： vue.js 交互前端

本文链接：https://blog.csdn.net/aihiao/article/details/122880987

版权

vue 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Vue.js的事件中心(eventHub)实现非父子组件之间的数据交互，包括创建事件中心、监听和触发事件、以及销毁事件的示例。通过实例演示了在Vue应用中，两个独立组件如何通过事件来同步状态和通信。

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

1. 非父子组件之间数据交互

1.1. 单独的事件中心管理组件间的通信

var eventHub = new Vue();

1.2. 监听事件

eventHub.$on('event-name', fun);

1.3. 销毁事件

eventHub.$off('event-name');

1.4. 触发事件

eventHub.$emit('event-name', param);

1.5. 图解

1.6. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>非父子组件之间数据交互</title>
	</head>
	<body>
		<div id="app">
			<div>父组件</div>
    		<div><button @click='handle'>销毁事件</button></div><br /><br />
    		
    		<plus-zs></plus-zs><br />
    		<minus-zs></minus-zs>
		</div>
		
		<script type="text/javascript" src="vue.min.js"></script>
		<script type="text/javascript">
			// 单独的事件中心管理组件间的通信
			var eventHub = new Vue();

			Vue.component('plus-zs', {
		      	data: function(){
		        	return {
		          		num: 0
		        	}
		      	},
		      	template: `
		        	<div>
		          		<div>lisi: {{num}}</div>
		          		<div><button @click='handle'>加zs</button></div>
		        	</div>
		      	`,
		      	methods: {
		        	handle: function(){
		          		eventHub.$emit('plus-event', 2);
		        	}
		      	},
		      	mounted: function() {
		        	eventHub.$on('minus-event', (val) => {
		          		this.num -= val;
		        	});
		      	}
		    });

		    Vue.component('minus-zs', {
		      	data: function(){
		        	return {
		          		num: 0
		        	}
		      	},
		      	template: `
		        	<div>
		          		<div>zhangsan: {{num}}</div>
		          		<div><button @click='handle'>减ls</button></div>
		        	</div>
		      	`,
		      	methods: {
		        	handle: function(){
		          		// 触发事件
		          		eventHub.$emit('minus-event', 1);
		        	}
		      	},
		      	mounted: function() {
		        	// 监听事件
		        	eventHub.$on('plus-event', (val) => {
		          		this.num += val;
		        	});
		      	}
		    });

			var vm = new Vue({
				el: "#app",
				methods: {
					handle: function(){
						// 销毁事件
          				eventHub.$off('minus-event');
          				eventHub.$off('plus-event');
        			}
				}
			});
		</script>
	</body>
</html>

1.7. 效果图