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