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)文章
下面小編就為大家?guī)?lái)一篇Vue.js項(xiàng)目模板搭建圖文教程。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
基于Vue 2.0的模塊化前端 UI 組件庫(kù)小結(jié)
AT-UI 是一款基于 Vue.js 2.0 的輕量級(jí)、模塊化前端 UI 組件庫(kù)，主要用于快速開發(fā) PC 網(wǎng)站產(chǎn)品。下面通過(guò)本文給大家介紹Vue 2.0的模塊化前端 UI 組件庫(kù)，需要的朋友參考下吧2017-12-12
Vue3中provide和inject作用和場(chǎng)景
Vue3中provide和inject作用和場(chǎng)景是頂層組件向任意的底層組件傳遞數(shù)據(jù)和方法,實(shí)現(xiàn)跨層組件通信,本文通過(guò)實(shí)例介紹Vue3 provide和inject的相關(guān)知識(shí),感興趣的朋友一起看看吧2023-11-11
webpack4+express+mongodb+vue實(shí)現(xiàn)增刪改查的示例
這篇文章主要介紹了webpack4+express+mongodb+vue 實(shí)現(xiàn)增刪改查的示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
單項(xiàng)數(shù)據(jù)流和雙向數(shù)據(jù)綁定的概念，這兩種不是相互沖突的嗎？即然能用v-model雙向數(shù)據(jù)綁定，不應(yīng)該就是雙向數(shù)據(jù)流了嗎？本文就詳細(xì)的介紹一下2022-04-04
Vue Element前端應(yīng)用開發(fā)之圖標(biāo)的維護(hù)和使用
在Vue Element前端應(yīng)用中，圖標(biāo)是必不可少點(diǎn)綴界面的元素，Element界面組件里面提供了很多常見的圖標(biāo)，因此考慮擴(kuò)展更多圖標(biāo)，引入了vue-awesome組件，它利用了Font Awesome的內(nèi)置圖標(biāo)，實(shí)現(xiàn)了更多圖標(biāo)的整合，可以在項(xiàng)目中使用更多的圖標(biāo)元素了2021-05-05
Vue項(xiàng)目的甘特圖組件之dhtmlx-gantt使用教程和實(shí)現(xiàn)效果展示(推薦)
文章介紹了如何使用dhtmlx-gantt組件來(lái)實(shí)現(xiàn)公司的甘特圖需求,并提供了一個(gè)簡(jiǎn)單的Vue組件示例,文章還分享了一些配置項(xiàng),如格式化表頭日期、設(shè)置甘特圖尺寸、啟用只讀模式、設(shè)置表格列等,感興趣的朋友一起看看吧2025-02-02
這篇文章主要介紹了vant中的toast層級(jí)改變操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
解決vue的過(guò)渡動(dòng)畫無(wú)法正常實(shí)現(xiàn)問(wèn)題
今天小編就為大家分享一篇解決vue的過(guò)渡動(dòng)畫無(wú)法正常實(shí)現(xiàn)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
vue a標(biāo)簽點(diǎn)擊實(shí)現(xiàn)賦值方式
這篇文章主要介紹了vue a標(biāo)簽點(diǎn)擊實(shí)現(xiàn)賦值方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09