vue兄弟組件之間傳值的方式有哪些呢？我們一起來看看吧！

兄弟組件指的是在同一個根組件中的組件, 組件之間沒有使用關(guān)系。

兄弟組件之間的數(shù)據(jù)傳值有兩種方式：

第一種在組件結(jié)構(gòu)相對簡單情況下,可以通過兄弟組件中的父組件， 子組件先把數(shù)據(jù)傳遞給父組件，父組件再傳遞給另外的子組件；

第二種是在兄弟組件中創(chuàng)建一個公共的vue實例來實現(xiàn)事件的發(fā)出和監(jiān)聽。

以下是操作示范：

vue實例：

import Vue from 'vue'

export default new Vue()

接著在子組件中引入公共的vue實例, 通過vue實例來發(fā)出事件：

methods: {

? ? tellname () {

? ? ? ?// 發(fā)出事件，傳遞數(shù)據(jù)givename自定義事件

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

}?

}

然后將另外的子組件引入公共vue實例,?通過vue實例監(jiān)聽事件并接收數(shù)據(jù)：

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

// 組件一加載就進行兄弟組件所發(fā)出的事件的監(jiān)聽

? mounted () {

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

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

? ? // 處理函數(shù)有一個默認參數(shù)，就是其它組件所傳遞的數(shù)據(jù)

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

? ? ? console.log(data);

? ? ? this.mysbfname = data

? ? })

? }

關(guān)于兄弟組件之間的數(shù)據(jù)傳值方式，我們就分享到這啦！

vue兄弟組件之間傳值

兄弟組件之間的數(shù)據(jù)傳值有兩種方式：第一種在組件結(jié)構(gòu)相對簡單情況下,可以通過兄弟組件中的父組件，子組件先把數(shù)據(jù)傳遞給父組件，父組件再傳遞給另外的子組件；第二種是在兄弟組件中創(chuàng)建一個公共的vue實例來實現(xiàn)事件的發(fā)出和監(jiān)聽。