在vue開發(fā)中總會遇到組件傳值問題，今天總結(jié)一下兄弟組件之間的傳值方法。
1、子傳父，父傳子
2、vuex
3、eventBus
接下來介紹如何使用eventBus實現(xiàn)兄弟組件傳值
首先我的需求是這樣的，頁面上由top，left，main，bottom四個組件構(gòu)成。需要將top中的值傳到left中。

image

第一步：創(chuàng)建一個eventBus.js文件，位置我是放在了src目錄下utils

import Vue from 'vue'
const Bus = new Vue()
export default Bus

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

  import Bus from '@/utils/eventBus.js'

然后在methods里邊定義一個函數(shù)

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

我測試用的是button點擊觸發(fā)changesize函數(shù)，然后將arg傳出去
第三步：在left組件中也先讓引入eventBus.js，然后使用created生命周期函數(shù)

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