Vue組件之間的數(shù)據(jù)共享詳解
更新時間：2021年11月29日 16:41:06 作者：crystal_iwwish
這篇文章主要為大家介紹了Vue組件之間的數(shù)據(jù)共享，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
一、在項目開發(fā)中，組件之間的最常見的關系分為如下兩種：
1.父子關系
2.兄弟關系
1.1 父子組件之間的數(shù)據(jù)共享
父子組件之間的數(shù)據(jù)共享又分為：
1.?父 -> 子共享數(shù)據(jù)
子組件：
父組件：
2.子 -> 父共享數(shù)據(jù)
子組件向父組件共享數(shù)據(jù)使用自定義事件。示例代碼如下
子組件：
父組件：
頁面顯示結果：
1.2 兄弟組件之間的數(shù)據(jù)共享
在 vue2.x 中，兄弟組件之間數(shù)據(jù)共享的方案是 EventBus
EventBus使用方法：
- 創(chuàng)建 eventBus.js 模塊，并向外共享一個 Vue 的實例對象
- 在數(shù)據(jù)發(fā)送方，調(diào)用 bus.$emit(‘事件名稱', 要發(fā)送的數(shù)據(jù)) 方法觸發(fā)自定義事件
- 在數(shù)據(jù)接收方，調(diào)用 bus.$on(‘事件名稱', 事件處理函數(shù)) 方法注冊一個自定義事件
示例：
1.創(chuàng)建 eventBus.js 模塊，并向外共享一個 Vue 的實例對象
2.?在數(shù)據(jù)發(fā)送方，調(diào)用 bus.$emit(‘事件名稱', 要發(fā)送的數(shù)據(jù)) 方法觸發(fā)自定義事件
3.在數(shù)據(jù)接收方，調(diào)用 bus.$on(‘事件名稱', 事件處理函數(shù)) 方法注冊一個自定義事件
總結
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關注腳本之家的更多內(nèi)容!
相關文章
時分秒都是跟月份一樣,從0開始數(shù)的,不用+1,因為月是1-12月,而時分秒是0-23和0-59,下面這篇文章主要給大家介紹了關于vue中如何利用js函數(shù)截取時間的年月日時分秒的相關資料,需要的朋友可以參考下2022-11-11
Vue框架提供了一些便捷的數(shù)組變異方法，包括push、pop、shift、unshift、splice、sort和reverse等，Vue的數(shù)組變異方法可以自動觸發(fā)DOM更新，本文就詳細帶大家了解一下Vue.js數(shù)組的變異方法2023-06-06
這篇文章主要給大家介紹了關于Vue項目中常用的工具函數(shù),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了基于vue實現(xiàn)探探滑動組件功能,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-05-05
我們對Vue中data數(shù)據(jù)的修改會導致界面對應的響應變化，而通過nextTick方法，可以在傳入nextTick的回調(diào)函數(shù)中獲取到變化后的DOM，講起來可能還是有點夢幻，下面我們直接使用nextTick體驗一下效果2022-08-08
這篇文章主要介紹了Vue組件公用方法提取mixin實現(xiàn)，多個組件共用一個方法時可以用?mixin?抽取到一個js文件中，作為共用方法，下面一起進入文章了解更多詳細內(nèi)容吧2022-03-03
Vue3中使用vuedraggable拖拽實戰(zhàn)教程
這篇文章主要介紹了Vue3中使用vuedraggable拖拽實戰(zhàn)教程,文中通過示例介紹了vue3拖拽組件vuedraggable的使用demo，需要的朋友可以參考下2023-06-06
這篇文章主要介紹了vue日歷/日程提醒/html5本地緩存功能，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
Vue3報錯‘defineProps‘?is?not?defined的解決方法
最近工作中遇到vue3中使用defineProps中報錯,飄紅,所以這篇文章主要給大家介紹了關于Vue3報錯‘defineProps‘?is?not?defined的解決方法,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了Vue中的父子組件傳值.sync,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12