溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“Vue實現組件間通信的方式有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Vue實現組件間通信的方式有哪些”吧!
一個組件里面引入另外一個組件，此時構成了一種“父子關系”，當前組件為“父”，引入的組件為“子”，如當前組件（父），在父組件中通過 “: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:'我是父頁面的內容',
toChildrenMsg:'從父頁面傳過到子頁面的內容'
}
}
}
</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>子組件接收到父組件傳過來的內容，實現效果如下圖所示：
在子組件中通過this.$emit()方法向父組件通信，如下，點擊觸發事件，執行this.$emit('fromChildMethod')，觸發父組件的fromChildMethod方法。
<template>
<div class="children-box">
<div>
<div>我是子頁面</div>
<div>{{message}}</div>
<div><span @click="toParentMethod">點擊觸發父頁面事件</span></div>
</div>
</div>
</template>
<script>
export default {
name:"Children",
props:{
message:{
type:String,
default:''
}
},
methods:{
toParentMethod(){
this.$emit('fromChildMethod')
}
}
}
</script>在父組件的子組件上綁定fromChildMethod方法，對該方法進行監聽，當該方法觸發時，執行父組件中相應的方法fromChild。
<template>
<div class="parent-box">
<div>
<div>我是父頁面</div>
<div >{{message}}</div>
<div >{{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:'我是父頁面的內容',
toChildrenMsg:'從父頁面傳過到子頁面的內容',
fromChildMsg:''
}
},
methods:{
fromChild(){
this.fromChildMsg = '子頁面觸發的方法' //監聽到子組件觸發的方法，顯示該內容
}
}
}
</script>當點擊子組件的對應的span，觸發方法，向父組件進行通知。
小結：父傳子，props；子傳父，this.$emit()；觸發、監聽名稱須一致。
真實的場景中，組件不僅僅是“父子”關系，還有“兄弟”關系跟跨層級組件等等。這時候props跟$emit可能就不太適用了，這時候它出現了，那就是Bus（事件總線），父子組件同樣適用。
Bus之觸發$emit、監聽$on、關閉$off，主要用到的就是$emit跟$on。
先在項目中新建一個文件夾bus，里面有個index.js文件，創建一個新的Vue實例，然后導出模塊。
接下來import這個新的Vue實例，也就是bus，常用的兩種導入方式，一種是全局導入，另外一種是局部導入（需每個組件都導入一次）。以下為全局導入，在main.js里面將該bus作為當前Vue實例的原型方法，能直接在各組件里面通過this.bus的方式調用。
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/>'
})下面展示實現bus通信過程，場景為父子，同樣的，兄弟、跨層級用法與其類似：
Parent組件中向Children組件通信，通過this.bus.$emit()觸發
<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組件監聽Parent組件觸發的事件（在mounted階段進行綁定監聽），注意事件名稱要一致，通過this.bus.$on()監聽，當總線中監聽到觸發該方法，拿到傳過來的值（也可以在里面執行自定義方法）。
<template>
<div class="children-box">
<div>
<div>我是子頁面</div>
<div >{{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 //此處為復制操作，也可在里面執行相應的方法
})
}
}
</script>效果圖：
總結：父子，兄弟，跨級（祖孫等）通信寫法相同，就不一一舉例了，都是通過this.bus.$emit()觸發，通過this.bus.$on()監聽，執行相應的操作，切記：觸發、監聽名稱必須相同！
Vuex相當于一個倉庫，你可以往倉庫里面放一些東西，保持存進去的時的狀態，可以修改，也可以在需要的時候取出，是一個全局狀態。本次只講如何使用vuex進行通信，不深究其原理。
安裝vuex
npm install vuex --save
這里我新建一個文件夾，名稱為store，里面有一個index.js文件，創建一個Vuex.Store實例，然后導出這個實例，從圖中可以明確看出store的大致結構及其要素，具體不展開講，關于vuex的相關文章數不勝數，可以自行去了解，這里主要講大致用法。
在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存入數據該可以用mutations、actions（可異步）進行存入，具體就不展開了，有興趣可以自己去深究。
可以通過動態路由、路由跳轉方式進行傳值，如this.$router.push({path:'xxx',query:{value:'xxx'}})，在跳轉的時候順便傳值，通過this.$route.params.value和this.$route.query.value獲取到傳過來的參數。該方式有局限性，只能在相互跳轉的組件通信取值，且直接在跳轉之后的頁面進行刷新取不到值，視情況而用。
sessionStorage、localStorage、cookie
多個組件之間的通信除了可以用bus、store之外，還比較一種常用的方式--緩存，在同一個窗口不關閉的情況下，該窗口下的其他組件都可以取到緩存中已經存好的值，利用sessionStorage.setItem(key,value)、localStorage.setItem(key,value)等將值存起來，其他組件可以通過sessionStorage.getItem(key)、localStorage.getItem(key)等方式拿到，多個頁面共享緩存數據，刷新頁面數據不會銷毀，可以用sessionStorage.removeItem(key)、localStorage.removeItem(key)的方式將緩存移除，可用場景還是比較多的。
到此，相信大家對“Vue實現組件間通信的方式有哪些”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
