vue組件之間的通信-創(chuàng)新互聯(lián)

vue組件間的通信有父--->子、子--->父、非父子之間的通信
    雖然我們稍微復(fù)雜的項(xiàng)目都用vuex來(lái)管理了，但是還是想寫一篇關(guān)于有父--->子、子--->父、非父子
    之間通信的文章。下面通過(guò)代碼來(lái)講述

    父--->子組件間的通信

    父級(jí)頁(yè)面：
    
    import Header from './components/header'
    export default {
        name: 'App',
         data () {
            return {
                parentMsg: '你訪問(wèn)的是父級(jí)頁(yè)面的數(shù)據(jù)',
            }
        },
        components:{
            Header,
        }
    }
    子頁(yè)面：
    
        export default {
            name: 'Header',
            props:['parentMsg'],   //接收父級(jí)頁(yè)面?zhèn)鬟^(guò)來(lái)的數(shù)據(jù)
            data(){
                return {
                    parentMsg:''
                    }
                }
        }

    子--->父組件間的通信
    父級(jí)頁(yè)面：
    
    
    子頁(yè)面：
    
    

非父子組件頁(yè)面間的通信，可以使用EventBus
使用EventBus首先需要新建一個(gè)EventBus.js，代碼如下：
    import Vue from 'vue'
    export default new Vue()
    // import Vue from 'vue'
    // const EventBus = new Vue()
    // export {EventBus}

    子頁(yè)面1：
    
    
    子頁(yè)面2：
    
    

以上就是組件間同信的三種方式，還有一種通信就是vuex，vuex在本文就不寫了，之前寫過(guò)一篇對(duì)vuex
的使用及理解。針對(duì)一些數(shù)據(jù)比較難管理的項(xiàng)目來(lái)說(shuō)還是用vuex，方便數(shù)據(jù)的管理。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比濱江網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式濱江網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋濱江地區(qū)。費(fèi)用合理售后完善，10多年實(shí)體公司更值得信賴。
本文名稱：vue組件之間的通信-創(chuàng)新互聯(lián)
路徑分享：http://m.jiaotiyi.com/article/pshis.html