兄弟组件间通信

最新推荐文章于 2024-07-02 17:50:31 发布

spfLinux

最新推荐文章于 2024-07-02 17:50:31 发布

阅读量408

点赞数

分类专栏： vue 文章标签：兄弟组件间通信

vue 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
	<div id="example">
		<xiong-da></xiong-da>
		<xiong-er></xiong-er>
	</div>

	<script type="text/javascript">

		//创建一个Vue实例，作为eventBus去使用
		var bus=new Vue();

		Vue.component('xiong-da',{
			created:function(){
				bus.$on('toDaEvent',function(msg){
					console.log("熊二："+msg);
				})
			},
			methods:{
				notifyEr:function(){
					bus.$emit('toErEvent','快跑，光头强来了');
				}
			},
			template:`
				<div>
					<h1>这是熊大</h1>
					<button @click="notifyEr">通知熊二</button>
				</div>
			`
		});

		Vue.component('xiong-er',{
			created:function(){
				bus.$on('toErEvent',function(msg){
					//console.log(arguments);
					console.log('熊大：'+msg);
				});
			},
			methods:{
				notifyDa:function(){
					bus.$emit('toDaEvent','怕啥，看我的');
				}
			},
			template:`
				<div>
					<h1>这是熊二</h1>
					<button @click="notifyDa">回应熊大</button>
				</div>
			`
		});

		new Vue({
			el:'#example',
			data:{
				msg:'VueJS is Awesome'
			}
		});
	</script>
</body>
</html>