vue兄弟組件傳遞數據的實例

new Vue({
 el: '#app',
 router,
 store,
 template: '<App/>',
 components: { App },
 data:{
 eventHub:new Vue() // 在main.js設置所有組件都能用調用
 },
 
})
 

<template>
 <div v-on:click="on()"></div>
 
</template>
<script>
export default {
 data(){
 return{
 datas:"數據"
}
},
 methods:{
 on(){
 this.$root.eventHunb.$emit("eventName",this.datas) 
 
 //$emit是觸發事件，當我們點擊on事件的時候，$emit會觸發其他組件的eventName事件， 把this.datas數據傳遞到其他組件中
 }
 }
 
}
 
</scrpt>

<template>
<div>{{datas}}</div>
</template>
<script>
exports default{
data(){
return{
datas:""
}
},
created(){
//組件一跟組件二都要綁定相同的eventName
this.$root.eventHub.$on("eventName",(tar) = > {

this.fn(tar) 
//$on是監聽事件，如果組件一得$emit觸發了，$on就會觸發this.fn事件

})
}
methods:{
fn:function(tar){
this.datas = tar
}
}

}
</script>