教育行業(yè)A股IPO第一股（股票代碼 003032）

全國(guó)咨詢/投訴熱線：400-618-4000

項(xiàng)目開(kāi)發(fā)中組件之間的數(shù)據(jù)共享【前端技術(shù)文章】

更新時(shí)間:2021年12月03日18時(shí)44分 來(lái)源:傳智教育 瀏覽次數(shù):

好口碑IT培訓(xùn)
在項(xiàng)目開(kāi)發(fā)中，組件之間的關(guān)系有父子關(guān)系、兄弟關(guān)系和后代關(guān)系三種，各種組件關(guān)系之間的數(shù)據(jù)共享方式和方法都不盡相同，本節(jié)就來(lái)看一下組件間數(shù)據(jù)共享的過(guò)程。

1.父組件和子組件之間共享數(shù)據(jù)
父組件通過(guò)v-bind 屬性綁定向子組件共享數(shù)據(jù)。同時(shí)，子組件需要使用props 接收數(shù)據(jù)。示例代碼如下：

子組件通過(guò)自定義事件的方式向父組件共享數(shù)據(jù)。示例代碼如下：


2.父子組件之間數(shù)據(jù)的雙向同步
父組件在使用子組件期間，可以使用v-model 指令維護(hù)組件內(nèi)外數(shù)據(jù)的雙向同步：
3.兄弟組件之間的數(shù)據(jù)共享
兄弟組件之間實(shí)現(xiàn)數(shù)據(jù)共享的方案是EventBus?？梢越柚诘谌降陌黰itt 來(lái)創(chuàng)建eventBus 對(duì)象，從而實(shí)現(xiàn)兄弟組件之間的數(shù)據(jù)共享。示意圖如下：

在項(xiàng)目中運(yùn)行如下的命令，安裝mitt 依賴包，

創(chuàng)建公共的EventBus 模塊，在項(xiàng)目中創(chuàng)建公共的eventBus 模塊如下：
4.在數(shù)據(jù)接收方自定義事件
在數(shù)據(jù)接收方，調(diào)用bus.on('事件名稱', 事件處理函數(shù)) 方法注冊(cè)一個(gè)自定義事件。示例代碼如下：


在數(shù)據(jù)接發(fā)送方觸發(fā)事件
在數(shù)據(jù)發(fā)送方，調(diào)用bus.emit('事件名稱', 要發(fā)送的數(shù)據(jù)) 方法觸發(fā)自定義事件。示例代碼如下：



5.后代關(guān)系組件之間的數(shù)據(jù)共享
后代關(guān)系組件之間共享數(shù)據(jù)，指的是父節(jié)點(diǎn)的組件向其子孫組件共享數(shù)據(jù)。此時(shí)組件之間的嵌套關(guān)系比較復(fù)雜，可以使用provide和inject實(shí)現(xiàn)后代關(guān)系組件之間的數(shù)據(jù)共享。

猜你喜歡：

vue組件三大部分： template、script、style

什么是Bootstrap組件？組件有什么優(yōu)勢(shì)？

Swing文本組件JTextField和JTextArea有哪些區(qū)別？

JDBC程序具體實(shí)現(xiàn)步驟演示【Java技術(shù)文章】

傳智教育java高級(jí)軟件工程師培訓(xùn)

0 分享到：
和我們?cè)诰€交談！