<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>兄弟之间传值</title>
<script src="vue-04/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<first></first>
<second></second>
</div>
<!--定义两个组件-->
<template id="first">
<div>
<!--<h2>斌斌</h2>-->
<p>航航回复斌斌的消息:{{str}}</p>
<button @click="send()">向航航发送邀请</button>
</div>
</template>
<template id="second">
<div>
<h3>斌斌向航航发送的消息:{{msg}}</h3>
<button @click="callback()">回复给斌斌</button>
</div>
</template>
</body>
<script type="text/javascript">
//定义一下中间层传递数据
var vmcenter = new Vue({});
//配置第一个组件
var first={
template:"#first",
data:function(){
return {
str:"",
}
},
methods:{
send:function(){
//通过中间层发送数据
vmcenter.$emit("hightogether","一起出去玩吧");
}
},
//监听组件2发的事件
created:function(){
var _this = this;
vmcenter.$on("cb",function(data){
_this.str=data;
});
}
};
//配置第二个组件
var second={
template:"#second",
data:function(){
return{
msg:""
}
},
//回复
methods:{
callback:function(){
vmcenter.$emit("cb","不想去");
}
},
created:function(){
var _this=this;
//监听组件1发的事件
vmcenter.$on("hightogether",function(data){
console.log(data);
_this.msg=data;
})
}
}
new Vue({
el:"#app",
components:{
first,
second
}
})
</script>
</html>
扫一扫
583
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
