Vue實(shí)現(xiàn)組件間通信的幾種方式(多種場(chǎng)景)
以下是我在開(kāi)發(fā)中用到過(guò)的vue組件之間的通信方式，不同的場(chǎng)景使用不同的方式，基本滿(mǎn)足所有開(kāi)發(fā)場(chǎng)景中的通信需求，從最簡(jiǎn)單的事例著手，講述如何使用，話(huà)不多說(shuō)直接開(kāi)始，滿(mǎn)滿(mǎn)的干貨，建議看完。
1、Props
父 >>> 子 （Props）
一個(gè)組件里面引入另外一個(gè)組件，此時(shí)構(gòu)成了一種“父子關(guān)系”，當(dāng)前組件為“父”，引入的組件為“子”，如當(dāng)前組件（父），在父組件中通過(guò) “:message” 向子組件通信。
<template>
<div class="parent-box">
<div>
<div>我是父頁(yè)面</div>
<div>{{message}}</div>
</div>
<children :message="toChildrenMsg"></children>
</div>
</template>
<script>
import Children from './Children.vue' //當(dāng)前頁(yè)引入子組件
export default {
name:"Parent",
components:{
Children
},
data(){
return {
message:'我是父頁(yè)面的內(nèi)容',
toChildrenMsg:'從父頁(yè)面?zhèn)鬟^(guò)到子頁(yè)面的內(nèi)容'
}
}
}
</script>
在子組件通過(guò)props進(jìn)行接收，注意子組件props里面接收的對(duì)象名稱(chēng)必須與父組件中在子組件綁定的名稱(chēng)一致，當(dāng)前例子為“message”，可以在組件return中this.的方式使用props里面的值。
<template>
<div class="children-box">
<div>
<div>我是子頁(yè)面</div>
<div>{{message}}</div>
</div>
</div>
</template>
<script>
export default {
name:"Children",
props:{
message:{
type:String, //類(lèi)型判斷
default:'' //默認(rèn)值
}
}
}
</script>
子組件接收到父組件傳過(guò)來(lái)的內(nèi)容，實(shí)現(xiàn)效果如下圖所示：
子 >>> 父 （$emit）
在子組件中通過(guò)this.$emit()方法向父組件通信，如下，點(diǎn)擊觸發(fā)事件，執(zhí)行this.$emit('fromChildMethod')，觸發(fā)父組件的fromChildMethod方法。
<template>
<div class="children-box">
<div>
<div>我是子頁(yè)面</div>
<div>{{message}}</div>
<div><span @click="toParentMethod">點(diǎn)擊觸發(fā)父頁(yè)面事件</span></div>
</div>
</div>
</template>
<script>
export default {
name:"Children",
props:{
message:{
type:String,
default:''
}
},
methods:{
toParentMethod(){
this.$emit('fromChildMethod')
}
}
}
</script>
在父組件的子組件上綁定fromChildMethod方法，對(duì)該方法進(jìn)行監(jiān)聽(tīng)，當(dāng)該方法觸發(fā)時(shí)，執(zhí)行父組件中相應(yīng)的方法fromChild。
<template>
<div class="parent-box">
<div>
<div>我是父頁(yè)面</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:'我是父頁(yè)面的內(nèi)容',
toChildrenMsg:'從父頁(yè)面?zhèn)鬟^(guò)到子頁(yè)面的內(nèi)容',
fromChildMsg:''
}
},
methods:{
fromChild(){
this.fromChildMsg = '子頁(yè)面觸發(fā)的方法' //監(jiān)聽(tīng)到子組件觸發(fā)的方法，顯示該內(nèi)容
}
}
}
</script>
當(dāng)點(diǎn)擊子組件的對(duì)應(yīng)的span，觸發(fā)方法，向父組件進(jìn)行通知。
小結(jié)：父?jìng)髯?，props；子傳父，this.$emit()；觸發(fā)、監(jiān)聽(tīng)名稱(chēng)須一致。
2、Bus事件總線(xiàn)
真實(shí)的場(chǎng)景中，組件不僅僅是“父子”關(guān)系，還有“兄弟”關(guān)系跟跨層級(jí)組件等等。這時(shí)候props跟$emit可能就不太適用了，這時(shí)候它出現(xiàn)了，那就是Bus（事件總線(xiàn)），父子組件同樣適用。
Bus之觸發(fā)$emit、監(jiān)聽(tīng)$on、關(guān)閉$off，主要用到的就是$emit跟$on。
先在項(xiàng)目中新建一個(gè)文件夾bus，里面有個(gè)index.js文件，創(chuàng)建一個(gè)新的Vue實(shí)例，然后導(dǎo)出模塊。
接下來(lái)import這個(gè)新的Vue實(shí)例，也就是bus，常用的兩種導(dǎo)入方式，一種是全局導(dǎo)入，另外一種是局部導(dǎo)入（需每個(gè)組件都導(dǎo)入一次）。以下為全局導(dǎo)入，在main.js里面將該bus作為當(dāng)前Vue實(shí)例的原型方法，能直接在各組件里面通過(guò)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/>'
})
下面展示實(shí)現(xiàn)bus通信過(guò)程，場(chǎng)景為父子，同樣的，兄弟、跨層級(jí)用法與其類(lèi)似：
Parent組件中向Children組件通信，通過(guò)this.bus.$emit()觸發(fā)
<template>
<div class="parent-box">
<div>
<div>我是父頁(yè)面</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為傳過(guò)去的值，非必傳
}
}
}
</script>
Children組件監(jiān)聽(tīng)Parent組件觸發(fā)的事件（在mounted階段進(jìn)行綁定監(jiān)聽(tīng)），注意事件名稱(chēng)要一致，通過(guò)this.bus.$on()監(jiān)聽(tīng)，當(dāng)總線(xiàn)中監(jiān)聽(tīng)到觸發(fā)該方法，拿到傳過(guò)來(lái)的值（也可以在里面執(zhí)行自定義方法）。
<template>
<div class="children-box">
<div>
<div>我是子頁(yè)面</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 //此處為復(fù)制操作，也可在里面執(zhí)行相應(yīng)的方法
})
}
}
</script>
效果圖：
總結(jié)：父子，兄弟，跨級(jí)（祖孫等）通信寫(xiě)法相同，就不一一舉例了，都是通過(guò)this.bus.$emit()觸發(fā)，通過(guò)this.bus.$on()監(jiān)聽(tīng)，執(zhí)行相應(yīng)的操作，切記：觸發(fā)、監(jiān)聽(tīng)名稱(chēng)必須相同！
3、Vuex狀態(tài)管理庫(kù)
Vuex相當(dāng)于一個(gè)倉(cāng)庫(kù)，你可以往倉(cāng)庫(kù)里面放一些東西，保持存進(jìn)去的時(shí)的狀態(tài)，可以修改，也可以在需要的時(shí)候取出，是一個(gè)全局狀態(tài)。本次只講如何使用vuex進(jìn)行通信，不深究其原理。
安裝vuex
npm install vuex --save
這里我新建一個(gè)文件夾，名稱(chēng)為store，里面有一個(gè)index.js文件，創(chuàng)建一個(gè)Vuex.Store實(shí)例，然后導(dǎo)出這個(gè)實(shí)例，從圖中可以明確看出store的大致結(jié)構(gòu)及其要素，具體不展開(kāi)講，關(guān)于vuex的相關(guān)文章數(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，直接對(duì)state進(jìn)行操作，在一個(gè)組件mounted階段將值存如store中，當(dāng)然也可在你想在的方法中進(jìn)行操作。
<template>
<div class="parent-box">
<div>
<div>我是父頁(yè)面</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 = '父組件存入' //在此處通過(guò)方式一存起來(lái)
}
}
</script>
其他組件從store中取出，當(dāng)然同樣也可以進(jìn)行修改。
<template>
<div class="children-box">
<div>
<div>我是子頁(yè)面</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>
效果圖：
方式二，通過(guò)this.$store.getters.xxx、mapGetters進(jìn)行取出。
// store/index.js
getters:{
getMsg:state=>{
return state.msg
}
},
//組件中取
this.$store.getters.getMsg
//也可以用mapGetters的方式
import { mapGetters } from 'vuex'
computed: {
...mapGetters(['getMsg'])
},
對(duì)store存入數(shù)據(jù)該可以用mutations、actions（可異步）進(jìn)行存入，具體就不展開(kāi)了，有興趣可以自己去深究。
4、Router
可以通過(guò)動(dòng)態(tài)路由、路由跳轉(zhuǎn)方式進(jìn)行傳值，如this.$router.push({path:'xxx',query:{value:'xxx'}})，在跳轉(zhuǎn)的時(shí)候順便傳值，通過(guò)this.$route.params.value和this.$route.query.value獲取到傳過(guò)來(lái)的參數(shù)。該方式有局限性，只能在相互跳轉(zhuǎn)的組件通信取值，且直接在跳轉(zhuǎn)之后的頁(yè)面進(jìn)行刷新取不到值，視情況而用。
5、緩存
sessionStorage、localStorage、cookie
多個(gè)組件之間的通信除了可以用bus、store之外，還比較一種常用的方式--緩存，在同一個(gè)窗口不關(guān)閉的情況下，該窗口下的其他組件都可以取到緩存中已經(jīng)存好的值，利用sessionStorage.setItem(key,value)、localStorage.setItem(key,value)等將值存起來(lái)，其他組件可以通過(guò)sessionStorage.getItem(key)、localStorage.getItem(key)等方式拿到，多個(gè)頁(yè)面共享緩存數(shù)據(jù)，刷新頁(yè)面數(shù)據(jù)不會(huì)銷(xiāo)毀，可以用sessionStorage.removeItem(key)、localStorage.removeItem(key)的方式將緩存移除，可用場(chǎng)景還是比較多的。
總結(jié)：大致介紹vue組件中幾種常用的通信、傳值方式，考慮不同的場(chǎng)景使用不同的方式，提高開(kāi)發(fā)效率，減少bug的產(chǎn)生。
到此這篇關(guān)于Vue實(shí)現(xiàn)組件間通信的幾種方式(多種場(chǎng)景)的文章就介紹到這了,更多相關(guān)Vue 組件通信內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了渲染器的工作原理,以及如何將真實(shí)dom或者組件用虛擬dom的形式進(jìn)行描述并渲染,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
Vue中Number方法將字符串轉(zhuǎn)換為數(shù)字的過(guò)程
這篇文章主要介紹了Vue中Number方法將字符串轉(zhuǎn)換為數(shù)字,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-06-06
Tailwind CSS是一個(gè)流行的前端CSS框架,它基于原子設(shè)計(jì)原則,提供了一套預(yù)構(gòu)建的CSS樣式類(lèi),旨在幫助開(kāi)發(fā)者快速地創(chuàng)建響應(yīng)式、可定制的用戶(hù)界面,本文給大家介紹了Vue2中使用tailwindCss的詳細(xì)教程,需要的朋友可以參考下2024-09-09
vue開(kāi)發(fā)移動(dòng)端h5環(huán)境搭建的全過(guò)程
在正式使用Vue進(jìn)行移動(dòng)端頁(yè)面開(kāi)發(fā)前,需要做一些前置工作,下面這篇文章主要給大家介紹了關(guān)于vue開(kāi)發(fā)移動(dòng)端h5環(huán)境搭建的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
在vue2項(xiàng)目中，組件間相互傳值或者后臺(tái)獲取的數(shù)據(jù)需要供多個(gè)組件使用的情況很多的情況下（后臺(tái)獲取數(shù)據(jù)存入vuex，組件之間共享數(shù)據(jù)），那么就需要用vuex來(lái)管理這些。2017-05-05
關(guān)于axios配置請(qǐng)求頭content-type實(shí)例詳解
現(xiàn)在前端開(kāi)發(fā)中需要通過(guò)Ajax發(fā)送請(qǐng)求獲取后端數(shù)據(jù)是很普遍的一件事情了,下面這篇文章主要介紹了關(guān)于axios配置請(qǐng)求頭content-type的相關(guān)資料,需要的朋友可以參考下2022-04-04
這篇文章主要給大家介紹了關(guān)于如何一步步基于element-ui封裝查詢(xún)組件的相關(guān)資料,本文通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue.js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-10-10
vue插件mescroll.js實(shí)現(xiàn)移動(dòng)端上拉加載和下拉刷新
這篇文章主要介紹了vue插件mescroll.js實(shí)現(xiàn)移動(dòng)端上拉加載和下拉刷新，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03
vue-preview動(dòng)態(tài)獲取圖片寬高并增加旋轉(zhuǎn)功能的實(shí)現(xiàn)
這篇文章主要介紹了vue-preview動(dòng)態(tài)獲取圖片寬高并增加旋轉(zhuǎn)功能的實(shí)現(xiàn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
vue計(jì)算屬性computed、事件、監(jiān)聽(tīng)器watch的使用講解
今天小編就為大家分享一篇關(guān)于vue計(jì)算屬性computed、事件、監(jiān)聽(tīng)器watch的使用講解，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01