Vue組件通信方法案例總結
一、父組件向子組件傳值(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ù)流
,父元素更新的時候,子元素的狀態(tài)也會隨之改變。
但反之會導致你的應用的數(shù)據(jù)流向難以理解,因此在子組件中不能修改父組件中的數(shù)據(jù)。
二、子組件向父組件傳值($emit)
子組件通過 $emit
事件向父組件發(fā)送消息,將自己的數(shù)據(jù)傳遞給父組件。
步驟:
- 在子組件上綁定一個
click
事件,觸發(fā)increment
方法 - 在
increment
方法中用$emit
定義一個自定義事件increment
,同時傳入this.counter
參數(shù) - 在父組件上綁定步驟2中自定義的
increment
事件,方法名為incrementTotal
- 在父組件中調(diào)用步驟3中的
incrementTotal
方法,這時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ā)送事件或接收事件,所以組件都可以上下平行地通知其他組件。
但也就是太方便所以若使用不慎,就會造成難以維護的“災難”,因此才需要更完善的Vuex作為狀態(tài)管理中心,將通知的概念上升到共享狀態(tài)層次。
這個方法是通過創(chuàng)建一個空的 vue 實例,當做 $emit 事件的處理中心(事件總線),通過他來觸發(fā)以及監(jiān)聽事件,方便的實現(xiàn)了任意組件間的通信,包含父子,兄弟,隔代組件。具體如下:
1. 初始化(new Vue())
首先需要創(chuàng)建事件總線并將其導出,以便其它模塊可以使用或者監(jiān)聽它。
我們可以通過兩種方式來處理。
方法一: 新創(chuàng)建一個 event-bus.js
文件
// event-bus.js import Vue from 'vue' export const EventBus = new Vue()
方法二: 直接在項目中的 main.js
初始化 EventBus
// main.js Vue.prototype.$EventBus = new Vue() // 注意:這種方式初始化的EventBus是一個全局的事件總線
現(xiàn)在我們已經(jīng)創(chuàng)建了 EventBus
,接下來你需要做到的就是在你的組件中加載它,并且調(diào)用同一個方法,就如你在父子組件中互相傳遞消息一樣。
2. 發(fā)送事件($emit())
假設有兩個Vue頁面需要通信: A 和 B 。A頁面中在按鈕上面綁定了點擊事件,發(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會是一種災難,到底是什么樣的“災難”了?大家都知道vue是單頁應用,如果你在某一個頁面刷新了之后,與之相關的EventBus會被移除,這樣就導致業(yè)務走不下去。還要就是如果業(yè)務有反復操作的頁面,EventBus在監(jiān)聽的時候就會觸發(fā)很多次,也是一個非常大的隱患。這時候我們就需要好好處理EventBus在項目中的關系。通常會用到,在vue頁面銷毀時,同時移除EventBus事件監(jiān)聽。
如果想移除事件的監(jiān)聽,可以像下面這樣操作:
import { EventBus } from "../event-bus.js"; EventBus.$off('aMsg', {})
EventBus.$off('aMsg')
移除應用內(nèi)所有對此某個事件的監(jiān)聽。
或者直接調(diào)用 EventBus.$off()
來移除所有事件頻道,不需要添加任何參數(shù) 。
四、Vuex
在做中大型的單頁應用的時候,例如需要多人協(xié)作開發(fā),全局維護登錄狀態(tài)等,我們最好還是選擇vuex來進行狀態(tài)管理。
到此這篇關于Vue組件通信方法案例總結的文章就介紹到這了,更多相關Vue組件通信方法總結內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
使用sessionStorage解決vuex在頁面刷新后數(shù)據(jù)被清除的問題
localStorage沒有時間期限,除非將它移除,sessionStorage即會話,當瀏覽器關閉時會話結束,有時間期限,具有自行百度。本文使用的是sessionStorage解決vuex在頁面刷新后數(shù)據(jù)被清除的問題,需要的朋友可以參考下2018-04-04vue使用element-resize-detector監(jiān)聽元素寬度變化方式
這篇文章主要介紹了vue使用element-resize-detector監(jiān)聽元素寬度變化方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-12-12Vue3使用Vue Router實現(xiàn)前端路由控制
在現(xiàn)代Web應用中,前端路由控制是非常重要的一部分,它可以幫助我們將不同的頁面內(nèi)容展示給用戶,同時保持用戶在瀏覽不同頁面時的連貫性,本文將介紹如何使用Vue Router來實現(xiàn)前端路由控制,需要的朋友可以參考下2024-10-10vue+iview 兼容IE11瀏覽器的實現(xiàn)方法
這篇文章主要介紹了vue+iview 兼容IE11瀏覽器的實現(xiàn)方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-01-01ElementUI Tag組件實現(xiàn)多標簽生成的方法示例
這篇文章主要介紹了ElementUI Tag組件實現(xiàn)多標簽生成的方法示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-07-07Vue數(shù)據(jù)驅(qū)動模擬實現(xiàn)2
這篇文章主要介紹了Vue數(shù)據(jù)驅(qū)動模擬實現(xiàn)的相關資料,實現(xiàn)Observer構造函數(shù),監(jiān)聽已有數(shù)據(jù)data中的所有屬性,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-01-01