vue兄弟組件之間傳值

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

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

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

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

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

以下是操作示范：

vue實(shí)例：

import Vue from 'vue'

export default new Vue()

接著在子組件中引入公共的vue實(shí)例, 通過(guò)vue實(shí)例來(lái)發(fā)出事件：

methods: {

    tellname () {

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

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

　　} 

}

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

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

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

  mounted () {

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

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

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

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

      console.log(data);

      this.mysbfname = data

    })

  }

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

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com