vue兄弟組件傳值三種方法總結

在vue開發中總會遇到組件傳值問題，今天總結一下兄弟組件之間的傳值方法。

1、子傳父，父傳子

2、vuex

3、eventBus

接下來介紹如何使用eventBus實現兄弟組件傳值

首先我的需求是這樣的，頁面上由top，left，main，bottom四個組件構成。需要將top中的值傳到left中。

第一步：創建一個js文件，eventBus.js，位置隨便放，我是放在了src目錄下

import Vue from 'vue'
export default new Vue()

第二步：在top組件中，引入剛才的js

import '@/eventBus.js' 

然后在methods里邊定義一個函數

methods:{
    changesize(){
        eventBus.$emit('add',this.arg)
    }
}

我測試用的是button點擊觸發changesize函數，然后將arg傳出去

第三步：在left組件中也先讓引入eventBus.js，然后使用created生命周期函數

created(){
    eventBus.$on('add',(message)=>{
        //一些操作，message就是從top組件傳過來的值
        console.log(message)
    })
},