vue中如何實(shí)現(xiàn)兄弟組件的數(shù)據(jù)傳遞

這篇文章主要介紹“vue中如何實(shí)現(xiàn)兄弟組件的數(shù)據(jù)傳遞”，在日常操作中，相信很多人在vue中如何實(shí)現(xiàn)兄弟組件的數(shù)據(jù)傳遞問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”vue中如何實(shí)現(xiàn)兄弟組件的數(shù)據(jù)傳遞”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

在main.js里面設(shè)置data{eventHub:new Vue() }

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

我們?cè)俳M件一設(shè)置一個(gè)事件調(diào)用組件二的事件，傳遞數(shù)據(jù)給組件二

<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)我們點(diǎn)擊on事件的時(shí)候，$emit會(huì)觸發(fā)其他組件的eventName事件， 把this.datas數(shù)據(jù)傳遞到其他組件中
 }
 }
 
}
 
</scrpt>

組件二被觸發(fā)的事件，接受的參數(shù)

<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)聽(tīng)事件，如果組件一得$emit觸發(fā)了，$on就會(huì)觸發(fā)this.fn事件

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

}
</script>

到此，關(guān)于“vue中如何實(shí)現(xiàn)兄弟組件的數(shù)據(jù)傳遞”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！