成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Vue組件之間通信的八種方式

klinson / 1105人閱讀

摘要：使用也有很長一段時間但是一直以來都沒對其組件之間的通信做一個總結(jié)這次就借此總結(jié)一下。引用信息將會注冊在父組件的對象上。

使用Vue也有很長一段時間,但是一直以來都沒對其組件之間的通信做一個總結(jié),這次就借此總結(jié)一下。 父子組件之間的通信 
1）props和$emit
父組件通過props將數(shù)據(jù)下發(fā)給props,子組件通過$emit來觸發(fā)自定義事件來通知父組件進行相應(yīng)的操作
具體代碼如下:
    ```
        // 父組件
        
        
        
        


        // 子組件
        
        
        
    ```
2)vm.$parent和vm.$children
vm.$parent: 父實例,如果當(dāng)前實例有的話
vm.$children: 獲取當(dāng)前實例的直接直接子組件,需要注意的是$children并不保證順序,也不是響應(yīng)式的
具體代碼如下:
    ```
        // 父組件的代碼
        
        
        
        // 子組件的代碼
        
        
        
    ```
3)ref
ref 被用來給元素或子組件注冊引用信息。引用信息將會注冊在父組件的 $refs 對象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子組件上，引用就指向組件實例
具體代碼如下:
    ```
        // 父組件
        
        
        
        // 子組件
        
        
          
    ```
4)自定義事件的v-model
https://cn.vuejs.org/v2/guide/components-custom-events.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-model
具體代碼如下:
    ```
        // 父組件
        
        
        
        // 子組件
        
        
        
    ```
祖先組件和其子孫組件通信 
1)provide/inject
provide/inject,允許一個祖先組件向其所有子孫后代注入一個依賴,不論組件層次有多深,并在起上下文關(guān)系成立的時間里始終生效
https://cn.vuejs.org/v2/api/#provide-inject      
具體代碼如下:
    ```
        // 父組件
        
        
        
        // 子組件
        
        
        
        // 孫組件
        
        
        
    ```
2)$attrs和$listeners
組件A下面有一個組件B,組件B下面有一個組件C,如果想將組件A的數(shù)據(jù)和自定義事件傳遞給組件C,就可以使用$attrs和$listeners。
vm.$attrs: 當(dāng)一個組件沒有聲明任何 prop 時(沒有在props聲明屬性)，這里會包含所有父作用域的綁定 ，并且可以通過 v-bind="$attrs" 傳入內(nèi)部組件
vm.$listeners: 包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監(jiān)聽器。它可以通過 v-on="$listeners" 傳入內(nèi)部組件。
https://cn.vuejs.org/v2/api/#vm-attrs
具體代碼如下:
```
    // 父組件
    
    
    
    // 子組件
    
    
    
    // 孫組件
    ```
        
        
        

    ```
```
非父子組件之間的通信 
通過中央事件總線來進行通信
通過新建一個Vue事件的bus對象,然后通過bus.$emit來觸發(fā)事件,bus.$on監(jiān)聽觸發(fā)的事件。使用中央事件總線時,需要在手動清除它,不然它會一直存在,原本只執(zhí)行一次的操作,將會執(zhí)行多次。
具體代碼如下:
    ```
        // 父組件
        
        
        
        // one組件
        
        
        
        // two組件
        
        
        
        // index.js 創(chuàng)建的bus
        import Vue from "vue";
        export const BUS = new Vue({
        }) 
    ```
通過vuex來進行數(shù)據(jù)管理,具體內(nèi)容見vuex官網(wǎng) 如果有什么不對的地方,或者還有什么方法我沒有寫到,希望大家可以提出來,謝謝。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/103504.html

相關(guān)文章

  • Docker的八種用途

    摘要：目前能夠有以下八種用途簡化配置這是初始目的，虛擬機最大的好處是基于你的應(yīng)用配置能夠無縫運行在任何平臺上。實現(xiàn)應(yīng)用之間的解耦，將多個應(yīng)用服務(wù)部署在多個中能輕松達到這個目的。 Docker 提供輕量的虛擬化，你能夠從Docker獲得一個額外抽象層，你能夠在單臺機器上運行多個Docker微容器，而每個微容器里都有一個微服務(wù)或獨立應(yīng)用，例如你可以將Tomcat運行在一個Docker，而MySQ...

    lindroid 評論0 收藏0

  • Java常用的八種排序算法與代碼實現(xiàn)精解

    摘要：直接插入排序的算法重點在于尋找插入位置。也稱縮小增量排序，是直接插入排序算法的一種更高效的改進版本。希爾排序是非穩(wěn)定排序算法。簡單選擇排序常用于取序列中最大最小的幾個數(shù)時。將新構(gòu)成的所有的數(shù)的十位數(shù)取出，按照十位數(shù)進行排序，構(gòu)成一個序列。 1.直接插入排序 直接插入排序算法是排序算法中最簡單的，但在尋找插入位置時的效率不高?；舅枷刖褪菍⒁粋€待排序的數(shù)字在已經(jīng)排序的序列中尋找找到一個插...

    2501207950 評論0 收藏0

  • 簡述Java內(nèi)存模型

    摘要：內(nèi)存模型即，簡稱，其規(guī)范了虛擬機與計算機內(nèi)存時如何協(xié)同工作的，規(guī)定了一個線程如何和何時看到其他線程修改過的值，以及在必須時，如何同步訪問共享變量。內(nèi)存模型要求調(diào)用棧和本地變量存放在線程棧上，對象存放在堆上。 Java內(nèi)存模型即Java Memory Model，簡稱JMM，其規(guī)范了Java虛擬機與計算機內(nèi)存時如何協(xié)同工作的，規(guī)定了一個線程如何和何時看到其他線程修改過的值，以及在必須時，...

    ACb0y 評論0 收藏0

  • 八種常見排序算法細講

    摘要：目錄常見的八種排序常見的八種排序直接插入排序直接插入排序希爾排序希爾排序直接選擇排序直接選擇排序堆排序堆排序冒泡排序冒泡排序快速排序快速排序版本版本挖坑法挖坑法前后指針版前后指針版快速排序代碼 目錄 常見的八種排序 直接插入排序 希爾排序 直接選擇排序 堆排序 冒泡排序? 快速排序 hoar...

    hiyang 評論0 收藏0

  • 2018年，前端應(yīng)該怎么學(xué)？

    摘要：未來一個大的趨勢就是前端開發(fā)的效果，正無限逼近原生效果同時一些大廠也在紛紛提前布局了，之前驚艷四方的天貓造物節(jié)淘寶造物節(jié)風(fēng)靡朋友圈的怎么做的如果我們要在這波浪潮上取得先機，那么就必須提前學(xué)習(xí)。我個人想學(xué)習(xí)的框架是天貓的。 面向2018年，我覺得前端有這么三個方向可以突破 前端邏輯層（包括三大框架，webpack，前端數(shù)據(jù)管理） 前端交互層（包括css3，canvas，svg，vr...

    AnthonyHan 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<