<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript">
</script>
</head>
<body>
<div id="app">
<helloa></helloa>
<hellob></hellob>
</div>
<script type="text/javascript">
/*消息总线负责非父子组件之间的消息传递*/
/*消息总线就是空的vue对象*/
var bus = new Vue();
var obja= {
'template':`
<div>
<button @click="sendMessage"> 我是组件a</button>
</div>
`,
methods:{
sendMessage(){
bus.$emit('李李',"是帅哥呀")
}
}
};
var objb= {
'template':`
<div>
<button> 我是组件b</button>
</div>
`
,
mounted(){//生命周期函数,渲染挂载完之后执行的函数
bus.$on('李李',function(data){
console.log(data)
alert(data)
})
}
}
var app = new Vue({
el:"#app",
data:{
},
components:{
"helloa":obja,
"hellob":objb
}
})
</script>
</body>
</html>
非父子组件的消息传递
最新推荐文章于 2024-09-12 16:43:23 发布