目錄

一, 簡單介紹組件通信

二, 詳解傳值方法

1.父傳子 props

2.子傳父 $emit

3.跨組件通信 event-bus

---

一, 簡單介紹組件通信

        我們知道在現(xiàn)在的開發(fā)環(huán)境下,不管前后端開發(fā)都是組件化模塊化,這是因為組件的優(yōu)勢無比的巨大,可以進(jìn)行多次的復(fù)用增加開發(fā)效率,也可以分類鮮明,便于維護(hù),而我今天所寫的就是開發(fā)中分割成不同的組件互相傳遞數(shù)據(jù)和互動

        我的工作中常用地組件通信大致分為三類: 父傳子 , 子傳父 , 跨組件傳值

        下面就來分別介紹一下 我常用的這三種傳值方法

二, 詳解傳值方法

        父子組件的確認(rèn)方法:我將 B 組件import引入到 A 組件中,那么 B 就是 A 的子組件,A 就是 B 的父組件

1.父傳子 props

        簡而言之,父傳子就是父組件把數(shù)據(jù)傳給子組件,具體就是如下,在子組件的props中定義自定義屬性來待接收父組件的數(shù)據(jù),有兩種方法 如下:

        第一種,也是最推薦用的一種,以復(fù)雜類型的方式進(jìn)行聲明,這樣存儲的便是一個地址,可以和父組件的數(shù)據(jù)進(jìn)行雙向綁定,同步數(shù)據(jù),雖然可以雙向綁定,但是在Vue2.0中還是不可以直接在子組件中更改父組件的數(shù)據(jù),需要用到子傳父才行,這點等下會寫到

        這里只是用 text 舉個栗子,具體叫什么都可以哈,只是父子里面需要對應(yīng)上相同

        這個 text 接收到數(shù)據(jù)后的使用方法和一般data中聲明的變量一樣,只是不能再子組件中改變他

子組件中:        props 定義屬性接收

 


    


        


            


            

        

        


            

                <template>
            

        

    

    


        


            


            

        

        


            

                <div> 
            

        

    

    


        


            


            

        

        


            

                <h2>son組件</h2> 
            

        

    

    


        


            


            

        

        


            

                <p>props:{{ text }}</p> 
            

        

    

    


        


            


            

        

        


            

                </div> 
            

        

    

    


        


            


            

        

        


            

                </template>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <script> 
            

        

    

    


        


            


            

        

        


            

                export default {
            

        

    

    


        


            


            

        

        


            

                // 在此處定義props 
            

        

    

    


        


            


            

        

        


            

                props: {
            

        

    

    


        


            


            

        

        


            

                // props中定義 接收父組件數(shù)據(jù)的自定義屬性,叫什么都可以,我隨便起了個text 
            

        

    

    


        


            


            

        

        


            

                text: {
            

        

    

    


        


            


            

        

        


            

                type: String, // type 是用來規(guī)定此屬性接收到的數(shù)據(jù)的數(shù)據(jù)類型 
            

        

    

    


        


            


            

        

        


            

                default: "未傳遞時默認(rèn)的文字" // 這個default是當(dāng)這個 text 沒有接收到傳遞的數(shù)據(jù)時的默認(rèn)值 
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                </script> 
            

        

    

父組件中:        標(biāo)簽內(nèi) 傳遞數(shù)據(jù)

 


    


        


            


            

        

        


            

                <template>
            

        

    

    


        


            


            

        

        


            

                <div id="app"> 
            

        

    

    


        


            


            

        

        


            

                <!--  
            

        

    

    


        


            


            

        

        


            

                 這里的text就是子組件props里定義的text,這兩個名字得一致 
            

        

    

    


        


            


            

        

        


            

                 并且傳遞的數(shù)據(jù)也要符合 type 規(guī)定的數(shù)據(jù)類型 
            

        

    

    


        


            


            

        

        


            

                 text就是傳遞字符串,:text就是傳遞動態(tài)數(shù)據(jù) 
            

        

    

    


        


            


            

        

        


            

                 --> 
            

        

    

    


        


            


            

        

        


            

                <Son text="我是大娃 傳給子啦" /> 
            

        

    

    


        


            


            

        

        


            

                <Son :text="wenzi" /> 
            

        

    

    


        


            


            

        

        


            

                </div> 
            

        

    

    


        


            


            

        

        


            

                </template>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <script> 
            

        

    

    


        


            


            

        

        


            

                import Son from './components/son.vue';
            

        

    

    


        


            


            

        

        


            

                export default {
            

        

    

    


        


            


            

        

        


            

                data () {
            

        

    

    


        


            


            

        

        


            

                return {
            

        

    

    


        


            


            

        

        


            

                wenzi: '我是二娃 傳給子啦' 
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                components: {
            

        

    

    


        


            


            

        

        


            

                Son
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                </script> 
            

        

    

        如上 雖然我的注釋寫的很清楚了,但是還是在介紹一下, <Son/> 是子組件的標(biāo)簽,在此標(biāo)簽的基礎(chǔ)上書寫 子組件props 定義的屬性名,并且傳遞參數(shù)具體對應(yīng)關(guān)系和效果如下:

        如上就是第一種我最常用的父傳子,其實還有一種方法,但是我一般也不用,很不方便,也貼到下邊了,這個是以數(shù)組方式聲明

 


    


        


            


            

        

        


            

                export default {
            

        

    

    


        


            


            

        

        


            

                // 在此處定義props 
            

        

    

    


        


            


            

        

        


            

                props: ['text']
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                </script>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            


            

        

    

 

2.子傳父 $emit

        剛剛說到了在 Vue2.0 子組件不能直接改父組件的數(shù)據(jù),否則會報錯,這個解決方法就是在子組件中發(fā)起一個 自定義事件 ,在父組件監(jiān)聽這個事件,并且定義一個函數(shù)來改變數(shù)據(jù),具體操作如下:

子組件:        發(fā)起一個自定義事件,等待父組件監(jiān)聽到執(zhí)行函數(shù)

 


    


        


            


            

        

        


            

                <template>
            

        

    

    


        


            


            

        

        


            

                <div> 
            

        

    

    


        


            


            

        

        


            

                <h2>son組件</h2> 
            

        

    

    


        


            


            

        

        


            

                <p>props:{{ text }}</p> 
            

        

    

    


        


            


            

        

        


            

                <button @click="changeTextFn">改變文字</button> 
            

        

    

    


        


            


            

        

        


            

                </div> 
            

        

    

    


        


            


            

        

        


            

                </template>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <script> 
            

        

    

    


        


            


            

        

        


            

                export default {
            

        

    

    


        


            


            

        

        


            

                // 在此處定義props 
            

        

    

    


        


            


            

        

        


            

                props: {
            

        

    

    


        


            


            

        

        


            

                // props中定義 接收父組件數(shù)據(jù)的自定義屬性,叫什么都可以,我隨便起了個text 
            

        

    

    


        


            


            

        

        


            

                text: {
            

        

    

    


        


            


            

        

        


            

                type: String, // type 是用來規(guī)定此屬性接收到的數(shù)據(jù)的數(shù)據(jù)類型 
            

        

    

    


        


            


            

        

        


            

                default: "未傳遞時默認(rèn)的文字" // 這個default是當(dāng)這個 text 沒有接收到傳遞的數(shù)據(jù)時的默認(rèn)值 
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                methods: {
            

        

    

    


        


            


            

        

        


            

                // 按鈕點擊事件 
            

        

    

    


        


            


            

        

        


            

                changeTextFn () {
            

        

    

    


        


            


            

        

        


            

                // 發(fā)起自定義事件,名字叫什么都行,第一個參數(shù)是事件名,之后再跟著的都是傳遞的參數(shù) 
            

        

    

    


        


            


            

        

        


            

                this.$emit('changeFn', '我想變成三娃')
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                </script> 
            

        

    

        我先在原有的代碼上添加了一個<button>按鈕,在點擊調(diào)用的函數(shù)中,通過 $emit 來發(fā)起事件并且可以傳遞參數(shù)

格式:        this.$emit('changeFn', '我想變成三娃') 

格式:        this.$emit('自定義事件名', 傳遞的參數(shù)) 

 

父組件:        行內(nèi)監(jiān)聽子組件的 自定義事件名(函數(shù)上不用寫參數(shù),在 methods 中直接寫形參就行)

 


    


        


            


            

        

        


            

                <template>
            

        

    

    


        


            


            

        

        


            

                <div id="app"> 
            

        

    

    


        


            


            

        

        


            

                <Son :text="wenzi" @changeFn="changeFn" /> 
            

        

    

    


        


            


            

        

        


            

                </div> 
            

        

    

    


        


            


            

        

        


            

                </template>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <script> 
            

        

    

    


        


            


            

        

        


            

                import Son from './components/son.vue';
            

        

    

    


        


            


            

        

        


            

                export default {
            

        

    

    


        


            


            

        

        


            

                data () {
            

        

    

    


        


            


            

        

        


            

                return {
            

        

    

    


        


            


            

        

        


            

                wenzi: '我是二娃 傳給子啦' 
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                components: {
            

        

    

    


        


            


            

        

        


            

                Son
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                methods: {
            

        

    

    


        


            


            

        

        


            

                // 監(jiān)聽子組件自定義事件 
            

        

    

    


        


            


            

        

        


            

                changeFn (newText) {
            

        

    

    


        


            


            

        

        


            

                // 這里的形參接受到的就是子組件中 第二個參數(shù)傳遞的數(shù)值 
            

        

    

    


        


            


            

        

        


            

                this.wenzi = newText
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                </script> 
            

        

    

對應(yīng)關(guān)系和效果圖如下:

 

 

 

3.跨組件通信 event-bus

        如果兩個組件的關(guān)系非常的復(fù)雜或者沒有未產(chǎn)生直接聯(lián)系，那么通過父子組件通訊是非常麻煩的。這時候可以使用通用的組件通訊方案：事件總線（event-bus)

        按照我的習(xí)慣,我會將事件總線創(chuàng)建到 main.js 中,這個使用原理是將bus掛載到Vue原型上,這樣就可以保證所有的組件都能通過 this.bus 訪問到事件總線,從而通過同一個事件總線監(jiān)聽同一個事件,具體原理和父子傳參差不多,都是 $emit 傳遞數(shù)據(jù), 只不過接收變成了$on 

        我這次以送禮物舉例用了兩個關(guān)系不大的組件 分別是 男組件 和 女組件 (隨便起的名)具體如下圖:

發(fā)送數(shù)據(jù) 男組件:   

    this.bus.$emit('自定義事件名',傳遞的參數(shù)) 

 


    


        


            


            

        

        


            

                <template>
            

        

    

    


        


            


            

        

        


            

                <div> 
            

        

    

    


        


            


            

        

        


            

                <h1>男組件</h1> 
            

        

    

    


        


            


            

        

        


            

                <button @click="sendGiftFn">送禮物</button> 
            

        

    

    


        


            


            

        

        


            

                </div> 
            

        

    

    


        


            


            

        

        


            

                </template>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <script> 
            

        

    

    


        


            


            

        

        


            

                export default {
            

        

    

    


        


            


            

        

        


            

                data () {
            

        

    

    


        


            


            

        

        


            

                return {
            

        

    

    


        


            


            

        

        


            

                gift: '玫瑰花' 
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                methods: {
            

        

    

    


        


            


            

        

        


            

                sendGiftFn () {
            

        

    

    


        


            


            

        

        


            

                // 通過 bus 事件總線發(fā)起 自定義事件,并且傳遞參數(shù)(第一個是事件名,第二個開始是參數(shù)) 
            

        

    

    


        


            


            

        

        


            

                this.bus.$emit('sendMessage', this.gift)
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                </script> 
            

        

    

接收數(shù)據(jù) 女組件:         

 this.bus.$on('監(jiān)聽的事件名',(e)=>{ e這個形參所接收的就是監(jiān)聽事件所攜帶的參數(shù)數(shù)據(jù) }) 

 


    


        


            


            

        

        


            

                <template>
            

        

    

    


        


            


            

        

        


            

                <div> 
            

        

    

    


        


            


            

        

        


            

                <h1>女組件</h1> 
            

        

    

    


        


            


            

        

        


            

                <p>來自男組件的禮物:{{ info }}</p> 
            

        

    

    


        


            


            

        

        


            

                </div> 
            

        

    

    


        


            


            

        

        


            

                </template>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <script> 
            

        

    

    


        


            


            

        

        


            

                export default {
            

        

    

    


        


            


            

        

        


            

                data () {
            

        

    

    


        


            


            

        

        


            

                return {
            

        

    

    


        


            


            

        

        


            

                info: "" 
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                created () {
            

        

    

    


        


            


            

        

        


            

                // e 就是 sendMessage 這個事件所傳遞的數(shù)據(jù) 
            

        

    

    


        


            


            

        

        


            

                this.bus.$on("sendMessage", (e) => {
            

        

    

    


        


            


            

        

        


            

                this.info = e;
            

        

    

    


        


            


            

        

        


            

                });
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                </script> 
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <style> 
            

        

    

    


        


            


            

        

        


            

                </style> 
            

        

    

具體效果如下:

 

綜上所述,就是我在工作中總結(jié)出來的一些組建通信的方法,希望您看到這里會有所收獲

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

轉(zhuǎn)自：csdn
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( www.ocunn.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)