vue如何實現兄弟組件的數據傳遞

本篇內容介紹了“vue如何實現兄弟組件的數據傳遞”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

在main.js里面設置data{eventHub:new 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>

vue是什么

Vue是一套用于構建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區別是，使用Vue可以自底向上逐層應用，其核心庫只關注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態系統支持的庫開發復雜的單頁應用。

“vue如何實現兄弟組件的數據傳遞”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！