vue兄弟組件之間傳值

兄弟組件指的是在同一個根組件中的組件, 組件之間沒有使用關係。

兄弟組件之間的數據傳值有兩種方式：

第一種在組件結構相對簡單情況下,可以通過兄弟組件中的父組件， 子組件先把數據傳遞給父組件，父組件再傳遞給另外的子組件；

第二種是在兄弟組件中創建一個公共的vue實例來實現事件的發出和監聽。

以下是操作示範：

vue實例：

import Vue from 'vue'

export default new Vue()

接着在子組件中引入公共的vue實例, 通過vue實例來發出事件：

methods: {

    tellname () {

       // 發出事件，傳遞數據　　givename自定義事件

   bus.$emit('givename', this.mybfname) 

} 

}

然後將另外的子組件引入公共vue實例, 通過vue實例監聽事件並接收數據：

import bus from '@/utils/myvue.js'

// 組件一加載就進行兄弟組件所發出的事件的監聽

  mounted () {

    // $(dom).on('click',function(){})

    // bus.$on(兄弟組件中自定義的事件, 處理函數)

    // 處理函數有一個默認參數，就是其它組件所傳遞的數據

    bus.$on('givename', (data) => {

      console.log(data);

      this.mysbfname = data

    })

  }

關於兄弟組件之間的數據傳值方式，我們就分享到這啦！