兄弟组件之间共享数据 EventBus总线

最新推荐文章于 2024-08-19 11:09:29 发布

六点路人

最新推荐文章于 2024-08-19 11:09:29 发布

阅读量310

点赞数

本文链接：https://blog.csdn.net/weixin_41675013/article/details/105888734

版权

兄弟组件之间共享数据 EventBus总线

$on 接受数据的那个组件
$emit 发送数据的那个组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<script type="text/javascript" src="vue.js"></script>
	</head>
	<body>
	<div id="root">
		<child content="Dell"></child>
		<child content="Lee"></child>
	</div>
	</body>
	<script type="text/javascript">
		Vue.prototype.bus = new Vue()
		Vue.component('child', {
			template:'<div @click="handleClick">{{selContent}}</div>',
			props:{
				content: String
			},
			data: function(){
				return {
					selContent: this.content
				}
			},
			methods: {
				handleClick: function(){
					this.bus.$emit("change",this.selContent)
				}
			},
			mounted: function(){
				var this_ = this
				this.bus.$on("change",function(msg){
					this_.selContent = msg
				})
			}
		})
		var vm = new Vue({
			el: "#root"
		})
	</script>
	
</html>