執行個體：點選按鈕将元件A的"A資料"傳到元件B的方框内
image
實作思路：根據官方文檔的教程->使用一個空的 Vue 執行個體作為事件總線
官方文檔
代碼展示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script type="text/javascript" src="lib/vue.min.js" ></script>
<title>元件通訊</title>
<style>
.b{
width: 100px;
height: 100px;
border: 2px darkblue solid;
}
#app{
margin: 0 auto;
width: 100px;
text-align: center;
height: 600px;
}
</style>
</head>
<body>
<div id="app">
<mya></mya>
<myb></myb>
</div>
</body>
<template id="A">
<div>
<button @click="senddata">點選</button>
<h1>{{a}}</h1>
</div>
</template>
<template id="B">
<div>
<h1>{{b}}</h1>
<div class="b">
{{a}}
</div>
</div>
</template>
<script>
var bus = new Vue();
var vm=new Vue({
el:"#app",
components:{
"mya":{
template:"#A",
data:function(){
return {
a:"A資料"
}
},
methods:{
senddata:function(){
bus.$emit("a-msg",this.a);
}
}
},
"myb":{
template:"#B",
data:function(){
return {
b:"B資料",
a:""
}
},
mounted:function(){
var bthis=this;
bus.$on("a-msg",function(a){
bthis.a=a;
});
}
}
}
});
</script>
</html>
效果展示