Vue組件通信方法案例總結(jié)
一、父組件向子組件傳值(props)
步驟:
- 在父組件中通過
v-bind將數(shù)據(jù)傳給子組件 - 在子組件中通過
props接收父組件傳遞過來的數(shù)據(jù)
<div id="app">
<!-- 1.通過 v-bind 將數(shù)據(jù)傳給子組件 -->
<test v-bind:ss='name'></test>
</div>
<script>
var a = new Vue({
el:'#app',
data:{
name:'bing',
},
components: {
test:{
props: ['ss'], // 2.接收父組件傳遞過來的數(shù)據(jù)
template:"<p>{{ss}}</p>"
}
}
})
</script>
props使得父子之間形成一種 單向數(shù)據(jù)流 ,父元素更新的時(shí)候,子元素的狀態(tài)也會(huì)隨之改變。
但反之會(huì)導(dǎo)致你的應(yīng)用的數(shù)據(jù)流向難以理解,因此在子組件中不能修改父組件中的數(shù)據(jù)。
二、子組件向父組件傳值($emit)
子組件通過 $emit 事件向父組件發(fā)送消息,將自己的數(shù)據(jù)傳遞給父組件。
步驟:
- 在子組件上綁定一個(gè)
click事件,觸發(fā)increment方法 - 在
increment方法中用$emit定義一個(gè)自定義事件increment,同時(shí)傳入this.counter參數(shù) - 在父組件上綁定步驟2中自定義的
increment事件,方法名為incrementTotal - 在父組件中調(diào)用步驟3中的
incrementTotal方法,這時(shí)incrementTotal方法就能接收到子組件傳入的參數(shù)
<div id="app">
<p>{{ total }}</p>
<button-counter v-on:increment="incrementTotal"></button-counter> <!-- 步驟3 -->
</div>
<script>
Vue.component('button-counter', {
template: '<button v-on:click="increment">{{ counter }}</button>', // 步驟1
data: function () {
return {
counter: '子組件的數(shù)據(jù)'
}
},
methods: {
increment: function () {
this.$emit('increment', this.counter); // 步驟2
}
}
});
new Vue({
el: '#app',
data: {
total: '父組件的數(shù)據(jù):'
},
methods: {
incrementTotal: function (e) { // 步驟4
this.total = this.total + e[0]
console.log(e);
}
}
})
</script>
三、兄弟組件傳值(EventBus)
如果不需要類似 Vuex 這樣的庫來處理組件之間的數(shù)據(jù)通信,就可以考慮Vue中的 事件總線(EventBus) 來通信。
在 Vue 中可以使用 EventBus 來作為溝通橋梁的概念,就像是所有組件共用相同的事件中心,可以向該中心注冊發(fā)送事件或接收事件,所以組件都可以上下平行地通知其他組件。
但也就是太方便所以若使用不慎,就會(huì)造成難以維護(hù)的“災(zāi)難”,因此才需要更完善的Vuex作為狀態(tài)管理中心,將通知的概念上升到共享狀態(tài)層次。
這個(gè)方法是通過創(chuàng)建一個(gè)空的 vue 實(shí)例,當(dāng)做 $emit 事件的處理中心(事件總線),通過他來觸發(fā)以及監(jiān)聽事件,方便的實(shí)現(xiàn)了任意組件間的通信,包含父子,兄弟,隔代組件。具體如下:
1. 初始化(new Vue())
首先需要?jiǎng)?chuàng)建事件總線并將其導(dǎo)出,以便其它模塊可以使用或者監(jiān)聽它。
我們可以通過兩種方式來處理。
方法一: 新創(chuàng)建一個(gè) event-bus.js 文件
// event-bus.js import Vue from 'vue' export const EventBus = new Vue()
方法二: 直接在項(xiàng)目中的 main.js 初始化 EventBus
// main.js Vue.prototype.$EventBus = new Vue() // 注意:這種方式初始化的EventBus是一個(gè)全局的事件總線
現(xiàn)在我們已經(jīng)創(chuàng)建了 EventBus ,接下來你需要做到的就是在你的組件中加載它,并且調(diào)用同一個(gè)方法,就如你在父子組件中互相傳遞消息一樣。
2. 發(fā)送事件($emit())
假設(shè)有兩個(gè)Vue頁面需要通信: A 和 B 。A頁面中在按鈕上面綁定了點(diǎn)擊事件,發(fā)送一則消息,想通知 B頁面。
<!-- A.vue -->
<template>
<button @click="sendMsg()">-</button>
</template>
<script>
import { EventBus } from "../event-bus.js";
export default {
methods: {
sendMsg() {
EventBus.$emit("aMsg", '來自A頁面的消息'); // 對外發(fā)送數(shù)據(jù)
}
}
};
</script>
3. 接收事件($on())
接下來,需要在 B頁面中接收這則消息。
<!-- B.vue -->
<template>
<p>{{msg}}</p>
</template>
<script>
import { EventBus } from "../event-bus.js";
export default {
data() {
return {
msg: ''
}
},
mounted() {
EventBus.$on("aMsg", (msg) => { // 接收 A 發(fā)送來的消息
this.msg = msg;
});
}
};
</script>
4. 移除事件監(jiān)聽者
前面提到過,如果使用不善,EventBus會(huì)是一種災(zāi)難,到底是什么樣的“災(zāi)難”了?大家都知道vue是單頁應(yīng)用,如果你在某一個(gè)頁面刷新了之后,與之相關(guān)的EventBus會(huì)被移除,這樣就導(dǎo)致業(yè)務(wù)走不下去。還要就是如果業(yè)務(wù)有反復(fù)操作的頁面,EventBus在監(jiān)聽的時(shí)候就會(huì)觸發(fā)很多次,也是一個(gè)非常大的隱患。這時(shí)候我們就需要好好處理EventBus在項(xiàng)目中的關(guān)系。通常會(huì)用到,在vue頁面銷毀時(shí),同時(shí)移除EventBus事件監(jiān)聽。
如果想移除事件的監(jiān)聽,可以像下面這樣操作:
import { EventBus } from "../event-bus.js";
EventBus.$off('aMsg', {})
EventBus.$off('aMsg')移除應(yīng)用內(nèi)所有對此某個(gè)事件的監(jiān)聽。
或者直接調(diào)用 EventBus.$off() 來移除所有事件頻道,不需要添加任何參數(shù) 。
四、Vuex
在做中大型的單頁應(yīng)用的時(shí)候,例如需要多人協(xié)作開發(fā),全局維護(hù)登錄狀態(tài)等,我們最好還是選擇vuex來進(jìn)行狀態(tài)管理。
到此這篇關(guān)于Vue組件通信方法案例總結(jié)的文章就介紹到這了,更多相關(guān)Vue組件通信方法總結(jié)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue實(shí)現(xiàn)用戶自定義字段顯示數(shù)據(jù)的方法
今天小編就為大家分享一篇Vue實(shí)現(xiàn)用戶自定義字段顯示數(shù)據(jù)的方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vue3+xgplayer實(shí)現(xiàn)短視頻功能詳解
短視頻應(yīng)用的流暢性和用戶交互性在用戶體驗(yàn)中扮演著重要角色,本文將展示如何通過?Vue?3?和?XGPlayer來實(shí)現(xiàn)這些功能,感興趣的小伙伴可以了解下2025-02-02
Vue 中如何利用 new Date() 獲取當(dāng)前時(shí)間
在 Vue 開發(fā)中,利用 new Date() 方法可以方便地獲取當(dāng)前時(shí)間,并通過 Date 對象的方法進(jìn)行時(shí)間格式化和操作。通過本文的介紹,您應(yīng)該對在 Vue 中獲取當(dāng)前時(shí)間有了更深入的了解,并了解了一些常見的時(shí)間操作方法,需要的朋友可以參考下2023-07-07
vue3?setup語法糖下父組件如何調(diào)用子組件
這篇文章主要介紹了vue3?setup語法糖下父組件如何調(diào)用子組件問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue前端實(shí)現(xiàn)dhtmlxgantt甘特圖代碼示例(個(gè)人需求)
這篇文章主要介紹了如何使用dhtmlx-gantt和chinese-days插件在項(xiàng)目中實(shí)現(xiàn)節(jié)假日置灰顯示的功能,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-03-03
Vue點(diǎn)擊切換Class變化,實(shí)現(xiàn)Active當(dāng)前樣式操作
這篇文章主要介紹了Vue點(diǎn)擊切換Class變化,實(shí)現(xiàn)Active當(dāng)前樣式操作,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07

