Vue組件之間的數(shù)據(jù)共享詳解
一、在項(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-11Vue項(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-05Vue3中使用vuedraggable拖拽實(shí)戰(zhàn)教程
這篇文章主要介紹了Vue3中使用vuedraggable拖拽實(shí)戰(zhàn)教程,文中通過(guò)示例介紹了vue3拖拽組件vuedraggable的使用demo,需要的朋友可以參考下2023-06-06Vue3報(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