Vue實現(xiàn)組件間通信的幾種方式(多種場景)

更新時間：2021年10月28日 16:15:10 作者：前端菜小白leo

本文主要介紹了Vue實現(xiàn)組件間通信的幾種方式，不同的場景使用不同的方式，基本滿足所有開發(fā)場景中的通信需求，感興趣的可以了解一下

1、Props

父 >>> 子（Props）

一個組件里面引入另外一個組件，此時構成了一種“父子關系”，當前組件為“父”，引入的組件為“子”，如當前組件（父），在父組件中通過 “:message” 向子組件通信。

<template>
    <div class="parent-box">
        <div>
            <div>我是父頁面</div>
            <div>{{message}}</div>
        </div>
        <children :message="toChildrenMsg"></children>
    </div>
</template>
 
<script>
import Children from './Children.vue'  //當前頁引入子組件
export default {
    name:"Parent",
    components:{
        Children
    },
    data(){
        return {
            message:'我是父頁面的內(nèi)容',
            toChildrenMsg:'從父頁面?zhèn)鬟^到子頁面的內(nèi)容'
        }
    }
}
</script>

在子組件通過props進行接收，注意子組件props里面接收的對象名稱必須與父組件中在子組件綁定的名稱一致，當前例子為“message”，可以在組件return中this.的方式使用props里面的值。

<template>
    <div class="children-box">
        <div>
            <div>我是子頁面</div>
            <div>{{message}}</div>
        </div>
    </div>
</template>
 
<script>
export default {
    name:"Children",
    props:{
        message:{
            type:String,  //類型判斷
            default:''    //默認值
        }
    }
}
</script>

子組件接收到父組件傳過來的內(nèi)容，實現(xiàn)效果如下圖所示：

子 >>> 父（$emit）

在子組件中通過this.$emit()方法向父組件通信，如下，點擊觸發(fā)事件，執(zhí)行this.$emit('fromChildMethod')，觸發(fā)父組件的fromChildMethod方法。

<template>
    <div class="children-box">
        <div>
            <div>我是子頁面</div>
            <div>{{message}}</div>
            <div><span @click="toParentMethod">點擊觸發(fā)父頁面事件</span></div>
        </div>
    </div>
</template>
 
<script>
export default {
    name:"Children",
    props:{
        message:{
            type:String,
            default:''
        }
    },
    methods:{
        toParentMethod(){
            this.$emit('fromChildMethod')
        }
    }
}
</script>

在父組件的子組件上綁定fromChildMethod方法，對該方法進行監(jiān)聽，當該方法觸發(fā)時，執(zhí)行父組件中相應的方法fromChild。

<template>
    <div class="parent-box">
        <div>
            <div>我是父頁面</div>
            <div style="font-size:12px;">{{message}}</div>
            <div style="font-size:12px;color:red">{{fromChildMsg}}</div>
        </div>
        <children :message="toChildrenMsg" @fromChildMethod="fromChild"></children>
    </div>
</template>
 
<script>
import Children from './Children.vue'
export default {
    name:"Parent",
    components:{
        Children
    },
    data(){
        return {
            message:'我是父頁面的內(nèi)容',
            toChildrenMsg:'從父頁面?zhèn)鬟^到子頁面的內(nèi)容',
            fromChildMsg:''
        }
    },
    methods:{
        fromChild(){
            this.fromChildMsg = '子頁面觸發(fā)的方法' //監(jiān)聽到子組件觸發(fā)的方法，顯示該內(nèi)容
        }
    }
}
</script>

當點擊子組件的對應的span，觸發(fā)方法，向父組件進行通知。

小結：父傳子，props；子傳父，this.$emit()；觸發(fā)、監(jiān)聽名稱須一致。

2、Bus事件總線

真實的場景中，組件不僅僅是“父子”關系，還有“兄弟”關系跟跨層級組件等等。這時候props跟$emit可能就不太適用了，這時候它出現(xiàn)了，那就是Bus（事件總線），父子組件同樣適用。

Bus之觸發(fā)$emit、監(jiān)聽$on、關閉$off，主要用到的就是$emit跟$on。

先在項目中新建一個文件夾bus，里面有個index.js文件，創(chuàng)建一個新的Vue實例，然后導出模塊。

接下來import這個新的Vue實例，也就是bus，常用的兩種導入方式，一種是全局導入，另外一種是局部導入（需每個組件都導入一次）。以下為全局導入，在main.js里面將該bus作為當前Vue實例的原型方法，能直接在各組件里面通過this.bus的方式調(diào)用。

import Vue from 'vue'
import App from './App'
import bus from './bus/index'
Vue.prototype.bus = bus
 
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

下面展示實現(xiàn)bus通信過程，場景為父子，同樣的，兄弟、跨層級用法與其類似：

Parent組件中向Children組件通信，通過this.bus.$emit()觸發(fā)

<template>
    <div class="parent-box">
        <div>
            <div>我是父頁面</div>
            <div @click="toChildBus"><span>向子組件通信</span></div>
        </div>
        <children></children>
    </div>
</template>
 
<script>
import Children from './Children.vue'
export default {
    name:"Parent",
    components:{
        Children
    },
    methods:{
        toChildBus(){
            let val = '父組件向子組件通信'
            this.bus.$emit('toChild',val) //val為傳過去的值，非必傳
        }
    }
}
</script>

Children組件監(jiān)聽Parent組件觸發(fā)的事件（在mounted階段進行綁定監(jiān)聽），注意事件名稱要一致，通過this.bus.$on()監(jiān)聽，當總線中監(jiān)聽到觸發(fā)該方法，拿到傳過來的值（也可以在里面執(zhí)行自定義方法）。

<template>
    <div class="children-box">
        <div>
            <div>我是子頁面</div>
            <div style="font-size:12px;color:blue;">{{fromParentMsg}}</div>
        </div>
    </div>
</template>
 
<script>
export default {
    name:"Children",
    data(){
        return {
            fromParentMsg:''
        }
    },
    mounted(){
        this.bus.$off('toChild')
        this.bus.$on('toChild',val=>{   
            this.fromParentMsg = val    //此處為復制操作，也可在里面執(zhí)行相應的方法
        })
    }
}
</script>

效果圖：

總結：父子，兄弟，跨級（祖孫等）通信寫法相同，就不一一舉例了，都是通過this.bus.$emit()觸發(fā)，通過this.bus.$on()監(jiān)聽，執(zhí)行相應的操作，切記：觸發(fā)、監(jiān)聽名稱必須相同！

3、Vuex狀態(tài)管理庫

Vuex相當于一個倉庫，你可以往倉庫里面放一些東西，保持存進去的時的狀態(tài)，可以修改，也可以在需要的時候取出，是一個全局狀態(tài)。本次只講如何使用vuex進行通信，不深究其原理。

安裝vuex

npm install vuex --save

這里我新建一個文件夾，名稱為store，里面有一個index.js文件，創(chuàng)建一個Vuex.Store實例，然后導出這個實例，從圖中可以明確看出store的大致結構及其要素，具體不展開講，關于vuex的相關文章數(shù)不勝數(shù)，可以自行去了解，這里主要講大致用法。

在mian.js全局引入，之后就可以直接使用了。

import Vue from 'vue'
import App from './App'
import router from './router'
import bus from './bus/index'
import store from './store/index'
 
Vue.config.productionTip = false
Vue.prototype.bus = bus
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

方式一，this.$store.state.xxx，直接對state進行操作，在一個組件mounted階段將值存如store中，當然也可在你想在的方法中進行操作。

<template>
    <div class="parent-box">
        <div>
            <div>我是父頁面</div>
        </div>
        <children></children>
    </div>
</template>
 
<script>
import Children from './Children.vue'
export default {
    name:"Parent",
    components:{
        Children
    },
    data(){
        return {
            fromChildMsg:''
        }
    }
    mounted(){
        this.$store.state.msg = '父組件存入'    //在此處通過方式一存起來
    }
}
</script>

其他組件從store中取出，當然同樣也可以進行修改。

<template>
    <div class="children-box">
        <div>
            <div>我是子頁面</div>
            <div @click="fromStore"><span>從store里面取</span></div>
            <div>{{fromStoreMsg}}</div>
        </div>
    </div>
</template>
 
<script>
export default {
    name:"Children",
    data(){
        return {
            fromStoreMsg:''
        }
    },
    methods:{
        fromStore(){
            this.fromStoreMsg = this.$store.state.msg
        }
    }
}
</script>

效果圖：

方式二，通過this.$store.getters.xxx、mapGetters進行取出。

// store/index.js
getters:{
    getMsg:state=>{
    return state.msg
  }
},
 
 
//組件中取
this.$store.getters.getMsg
 
//也可以用mapGetters的方式
import { mapGetters } from 'vuex'
computed: {
 ...mapGetters(['getMsg'])
},

對store存入數(shù)據(jù)該可以用mutations、actions（可異步）進行存入，具體就不展開了，有興趣可以自己去深究。

4、Router

可以通過動態(tài)路由、路由跳轉方式進行傳值，如this.$router.push({path:'xxx',query:{value:'xxx'}})，在跳轉的時候順便傳值，通過this.$route.params.value和this.$route.query.value獲取到傳過來的參數(shù)。該方式有局限性，只能在相互跳轉的組件通信取值，且直接在跳轉之后的頁面進行刷新取不到值，視情況而用。

5、緩存

sessionStorage、localStorage、cookie

多個組件之間的通信除了可以用bus、store之外，還比較一種常用的方式--緩存，在同一個窗口不關閉的情況下，該窗口下的其他組件都可以取到緩存中已經(jīng)存好的值，利用sessionStorage.setItem(key,value)、localStorage.setItem(key,value)等將值存起來，其他組件可以通過sessionStorage.getItem(key)、localStorage.getItem(key)等方式拿到，多個頁面共享緩存數(shù)據(jù)，刷新頁面數(shù)據(jù)不會銷毀，可以用sessionStorage.removeItem(key)、localStorage.removeItem(key)的方式將緩存移除，可用場景還是比較多的。

總結：大致介紹vue組件中幾種常用的通信、傳值方式，考慮不同的場景使用不同的方式，提高開發(fā)效率，減少bug的產(chǎn)生。

到此這篇關于Vue實現(xiàn)組件間通信的幾種方式(多種場景)的文章就介紹到這了,更多相關Vue 組件通信內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

詳解Vue如何手寫虛擬dom并進行渲染
這篇文章主要為大家詳細介紹了渲染器的工作原理,以及如何將真實dom或者組件用虛擬dom的形式進行描述并渲染,感興趣的小伙伴可以跟隨小編一起學習一下
2024-03-03
Vue中Number方法將字符串轉換為數(shù)字的過程
這篇文章主要介紹了Vue中Number方法將字符串轉換為數(shù)字,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-06-06
Vue2中使用tailwindCss的詳細教程
Tailwind CSS是一個流行的前端CSS框架,它基于原子設計原則,提供了一套預構建的CSS樣式類,旨在幫助開發(fā)者快速地創(chuàng)建響應式、可定制的用戶界面,本文給大家介紹了Vue2中使用tailwindCss的詳細教程,需要的朋友可以參考下
2024-09-09
vue開發(fā)移動端h5環(huán)境搭建的全過程
在正式使用Vue進行移動端頁面開發(fā)前,需要做一些前置工作,下面這篇文章主要給大家介紹了關于vue開發(fā)移動端h5環(huán)境搭建的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-08-08
詳細講解vue2+vuex+axios
在vue2項目中，組件間相互傳值或者后臺獲取的數(shù)據(jù)需要供多個組件使用的情況很多的情況下（后臺獲取數(shù)據(jù)存入vuex，組件之間共享數(shù)據(jù)），那么就需要用vuex來管理這些。
2017-05-05
關于axios配置請求頭content-type實例詳解
現(xiàn)在前端開發(fā)中需要通過Ajax發(fā)送請求獲取后端數(shù)據(jù)是很普遍的一件事情了,下面這篇文章主要介紹了關于axios配置請求頭content-type的相關資料,需要的朋友可以參考下
2022-04-04
如何一步步基于element-ui封裝查詢組件
這篇文章主要給大家介紹了關于如何一步步基于element-ui封裝查詢組件的相關資料,本文通過示例代碼介紹的非常詳細,對大家學習或者使用vue.js具有一定的參考學習價值,需要的朋友可以參考下
2021-10-10
vue插件mescroll.js實現(xiàn)移動端上拉加載和下拉刷新
這篇文章主要介紹了vue插件mescroll.js實現(xiàn)移動端上拉加載和下拉刷新，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-03-03
vue-preview動態(tài)獲取圖片寬高并增加旋轉功能的實現(xiàn)
這篇文章主要介紹了vue-preview動態(tài)獲取圖片寬高并增加旋轉功能的實現(xiàn)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
vue計算屬性computed、事件、監(jiān)聽器watch的使用講解
今天小編就為大家分享一篇關于vue計算屬性computed、事件、監(jiān)聽器watch的使用講解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧
2019-01-01