vue組件之間通信方式總結(jié)

組件化開(kāi)發(fā)最常見(jiàn)的業(yè)務(wù)場(chǎng)景就是組件之間的通信轩端,而vue并不能像react一樣凯亮,靈活的運(yùn)用props和回調(diào)函數(shù)就可以實(shí)現(xiàn)組件之間的通信恩商,vue提供相對(duì)較多的api應(yīng)對(duì)不同的功能需求倾鲫,這里做一個(gè)運(yùn)用層次的歸納,備忘郑气;

先模擬一個(gè)業(yè)務(wù)組件場(chǎng)景如下:

傳遞類(lèi)型見(jiàn)虛線字母(A幅垮、B……)

image

方式一:props

props適合類(lèi)型A父?jìng)髯拥膫鬟f類(lèi)型;也是最常見(jiàn)的傳遞方式尾组;用法參見(jiàn)官方文檔忙芒;

方式二:$emit/$on

此方法適合ABCDEF所有傳遞類(lèi)型,父?jìng)髯踊淝取⒆觽鞲负侨⒖缃M件傳遞等;這里主要介紹一下兩種場(chǎng)景的使用方法

  • 子傳父(B)主要通過(guò)$emit自定義事件發(fā)布事件跨跨,傳遞對(duì)應(yīng)參數(shù)潮峦,在父組件通過(guò)組件的屬性綁定對(duì)應(yīng)事件,接收對(duì)應(yīng)的參數(shù)勇婴;
  • 跨組件傳遞(all)主要是通過(guò)在new Vue實(shí)例對(duì)象上綁定中心事件忱嘹,然后廣播至各組件實(shí)現(xiàn);

以下模擬E路徑實(shí)現(xiàn)耕渴,其他相同

    // componentE
    var componentE = {
        template:`
        <h1 @click='cmeClick'>{{msge_}}</h1>
        `,
        data:function(){
            return{
                msge_:'componentE msg'
            }
        },
        methods:{
            cmeClick(){  
                // this.$root指向new vue實(shí)例對(duì)象
                this.$root.$emit('componentE',this.msge_);
            }
        }
    }
    // componentB
    var componentB = {
        template:`
            <h1>{{msge_}}</h1>
        `,
        data:function(){
            return{
                msge_:'componentB msg'
            }
        },
        mounted() {
            this.$root.$on('componentE',this.cme_emit)
        },
        methods:{
            cme_emit(msg){  
                console.log(msg) //componentE msg
            }
        }
    }

方式三:$attrs/$listeners

此方法常用于C路徑傳遞方式德谅,也就是祖?zhèn)髯樱?code>$attrs傳遞屬性,$listeners傳遞事件萨螺;因?yàn)?code>props傳遞只能之上而下一層一層傳遞窄做,并不能躍級(jí)傳遞,$attrs/$listeners可以作為中間層將上層組件信息慰技,傳遞給任何子組件椭盏;

例子:首先componentC通過(guò)props接收到componentA組件信息;然后通過(guò)$attrs/$listeners將接收到的信息傳遞給componentDcomponentE;代碼如下:

        var componentE = {
            template:`
            <h1 @click='cmeClick'>{{msge_}}</h1>
            `,
            mounted() {
                console.log('cme:',this.$attrs,this.$listeners)
            }
            data:function(){
                return{
                    msge_:this.msge
                }
            },
        }
        var componentD = {
            template:`
            <h1>{{msgd_}}</h1>
            `,
            mounted() {
                console.log('cmd:',this.$attrs,this.$listeners)
            },
            data:function(){
                return{
                    msgd_:this.msgd
                }
            }
        }
        var componentC = {
            props:['msgc'], // `$attrs/$listeners`接收沒(méi)被props接收的屬性數(shù)據(jù)
            template:`
            <div>
                <h1>{{msgc_}}</h1>
                // 此處通過(guò)v-bind v-on 傳遞給需要的組件
                <componentD :msgd='msgd' v-bind='$attrs' v-on='$listeners' />
                <componentE :msgd='msgd' v-bind='$attrs' v-on='$listeners' />
            </div>
            `,
            data:function(){
                return{
                    msgc_:this.msgc,
                    msgd:'ddd',
                    msge:'eee'
                }
            },
            components:{
                componentD:componentD,
                componentE:componentE
            }
        }
        var componentA = {
            template:`<div><componentC :b='b' @tb='tb' :msgc='msgc' /></div>`,
            data:function(){
                return{
                    msgc:'ccc',
                    b:0,
                }
            },
            methods:{
                cme_emit:function(msg){
                    console.log('cma:',msg)
                },
                tb(){
                    console.log(tb)
                }
            },
            components:{
                cmc:cmc
            }
        }

方式四:provide/inject

provide/inject是從祖先組件想后代組件傳遞吻商,不論層次多深掏颊,但官方不推薦使用,這樣會(huì)破壞vue 數(shù)據(jù)流原則艾帐;使用方法很簡(jiǎn)單乌叶,祖組件定義provide數(shù)據(jù),后代組件inject接收柒爸;

 var componentA = {
            template:`<div>1111</div>`,
            data:function(){
            },
            provide:{
                testProvide:'provide data'
            },
            //……
        }
        
var componentE = {
            template:`
            <h1'>2222</h1>
            `,
            inject:['testProvide'],
            mounted() {
                console.log(this.testProvide) //provide data
            },
        }

方式五 vuex

vuex是vue生態(tài)里面的狀態(tài)管理器准浴,可要儲(chǔ)存獲取項(xiàng)目任何數(shù)據(jù),詳見(jiàn)官網(wǎng)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末捎稚,一起剝皮案震驚了整個(gè)濱河市乐横,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌今野,老刑警劉巖葡公,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異条霜,居然都是意外死亡催什,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén)宰睡,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)蒲凶,“玉大人,你說(shuō)我怎么就攤上這事夹厌”” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵矛纹,是天一觀的道長(zhǎng)臂聋。 經(jīng)常有香客問(wèn)我,道長(zhǎng)或南,這世上最難降的妖魔是什么孩等? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮采够,結(jié)果婚禮上肄方,老公的妹妹穿的比我還像新娘。我一直安慰自己蹬癌,他們只是感情好权她,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布虹茶。 她就那樣靜靜地躺著,像睡著了一般隅要。 火紅的嫁衣襯著肌膚如雪蝴罪。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 52,713評(píng)論 1 312
  • 那天步清,我揣著相機(jī)與錄音要门,去河邊找鬼。 笑死廓啊,一個(gè)胖子當(dāng)著我的面吹牛欢搜,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播谴轮,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼炒瘟,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了书聚?” 一聲冷哼從身側(cè)響起唧领,我...
    開(kāi)封第一講書(shū)人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎雌续,沒(méi)想到半個(gè)月后斩个,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡驯杜,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年受啥,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片鸽心。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡滚局,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出顽频,到底是詐尸還是另有隱情藤肢,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布糯景,位于F島的核電站嘁圈,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏蟀淮。R本人自食惡果不足惜最住,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望怠惶。 院中可真熱鬧涨缚,春花似錦、人聲如沸策治。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至轧拄,卻和暖如春揽祥,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背檩电。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留府树,地道東北人俐末。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像奄侠,于是被迫代替她去往敵國(guó)和親卓箫。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • 組件(Component)是Vue.js最核心的功能垄潮,也是整個(gè)架構(gòu)設(shè)計(jì)最精彩的地方烹卒,當(dāng)然也是最難掌握的。...
    六個(gè)周閱讀 5,624評(píng)論 0 32
  • 前言 您將在本文當(dāng)中了解到,往網(wǎng)頁(yè)中添加數(shù)據(jù),從傳統(tǒng)的dom操作過(guò)渡到數(shù)據(jù)層操作,實(shí)現(xiàn)同一個(gè)目標(biāo),兩種不同的方式....
    itclanCoder閱讀 25,823評(píng)論 1 12
  • 今天一早班飛機(jī)就直奔皇后鎮(zhèn)弯洗,因?yàn)樵缙鹁陀惺斋@旅急,直接升級(jí)金色機(jī)身! 皇后鎮(zhèn)群山環(huán)抱點(diǎn)綴山頂白雪皚皚 今天停留皇后鎮(zhèn)一...
    Ivanlu666閱讀 176評(píng)論 1 4
  • 1牡整、首先安裝好ReactNative的運(yùn)行環(huán)境藐吮,安裝組件依賴(lài)庫(kù) 2、導(dǎo)入 3逃贝、使用 還需要在構(gòu)造方法中初始化數(shù)據(jù)谣辞,...
    不要和我名字一樣閱讀 5,851評(píng)論 1 4
  • 今天是2016年12月8日,對(duì)我來(lái)說(shuō)是個(gè)特殊的日子沐扳,今天是我的生日泥从,匆匆三十九歲的生日。 在這個(gè)值得紀(jì)念的...
    威角度閱讀 604評(píng)論 4 7