溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Vue組件之間的數(shù)據(jù)共享怎么實(shí)現(xiàn)

發(fā)布時(shí)間：2021-12-07 15:19:05 來源：億速云 閱讀：159 作者：iii 欄目：開發(fā)技術(shù)

本篇內(nèi)容介紹了“Vue組件之間的數(shù)據(jù)共享怎么實(shí)現(xiàn)”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

    一、在項(xiàng)目開發(fā)中，組件之間的最常見的關(guān)系分為如下兩種：

    1.父子關(guān)系

    2.兄弟關(guān)系

    1.1 父子組件之間的數(shù)據(jù)共享

    父子組件之間的數(shù)據(jù)共享又分為：

    1. 父 -> 子共享數(shù)據(jù)

    子組件：

    Vue組件之間的數(shù)據(jù)共享怎么實(shí)現(xiàn)

    父組件：

    Vue組件之間的數(shù)據(jù)共享怎么實(shí)現(xiàn)

    2.子 -> 父共享數(shù)據(jù)

    子組件向父組件共享數(shù)據(jù)使用自定義事件。示例代碼如下

    子組件：

    Vue組件之間的數(shù)據(jù)共享怎么實(shí)現(xiàn)

    父組件：

    Vue組件之間的數(shù)據(jù)共享怎么實(shí)現(xiàn)

    頁面顯示結(jié)果：

    Vue組件之間的數(shù)據(jù)共享怎么實(shí)現(xiàn)

    1.2 兄弟組件之間的數(shù)據(jù)共享

    在 vue2.x 中，兄弟組件之間數(shù)據(jù)共享的方案是 EventBus

    EventBus使用方法：

    • 創(chuàng)建 eventBus.js 模塊，并向外共享一個 Vue 的實(shí)例對象

    • 在數(shù)據(jù)發(fā)送方，調(diào)用 bus.$emit(‘事件名稱', 要發(fā)送的數(shù)據(jù)) 方法觸發(fā)自定義事件

    • 在數(shù)據(jù)接收方，調(diào)用 bus.$on(‘事件名稱', 事件處理函數(shù)) 方法注冊一個自定義事件

    示例：

    1.創(chuàng)建 eventBus.js 模塊，并向外共享一個 Vue 的實(shí)例對象

    Vue組件之間的數(shù)據(jù)共享怎么實(shí)現(xiàn)

    2. 在數(shù)據(jù)發(fā)送方，調(diào)用 bus.$emit(‘事件名稱', 要發(fā)送的數(shù)據(jù)) 方法觸發(fā)自定義事件

    Vue組件之間的數(shù)據(jù)共享怎么實(shí)現(xiàn)

    3.在數(shù)據(jù)接收方，調(diào)用 bus.$on(‘事件名稱', 事件處理函數(shù)) 方法注冊一個自定義事件

    Vue組件之間的數(shù)據(jù)共享怎么實(shí)現(xiàn)

    “Vue組件之間的數(shù)據(jù)共享怎么實(shí)現(xiàn)”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

    向AI問一下細(xì)節(jié)

    免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

    vue
    AI
    助
    手