vue兄弟組件傳遞數(shù)據(jù)的實例

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

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

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

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

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

}
</script>