成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

klinson / 1136人閱讀

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

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


        // 子組件
        
        
        
    ```
2)vm.$parent和vm.$children
vm.$parent: 父實例,如果當前實例有的話
vm.$children: 獲取當前實例的直接直接子組件,需要注意的是$children并不保證順序,也不是響應式的
具體代碼如下:
    ```
        // 父組件的代碼
        
        
        
        // 子組件的代碼
        
        
        
    ```
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,允許一個祖先組件向其所有子孫后代注入一個依賴,不論組件層次有多深,并在起上下文關系成立的時間里始終生效
https://cn.vuejs.org/v2/api/#provide-inject      
具體代碼如下:
    ```
        // 父組件
        
        
        
        // 子組件
        
        
        
        // 孫組件
        
        
        
    ```
2)$attrs和$listeners
組件A下面有一個組件B,組件B下面有一個組件C,如果想將組件A的數(shù)據(jù)和自定義事件傳遞給組件C,就可以使用$attrs和$listeners。
vm.$attrs: 當一個組件沒有聲明任何 prop 時(沒有在props聲明屬性)，這里會包含所有父作用域的綁定 ，并且可以通過 v-bind="$attrs" 傳入內部組件
vm.$listeners: 包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監(jiān)聽器。它可以通過 v-on="$listeners" 傳入內部組件。
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ù)管理,具體內容見vuex官網(wǎng) 如果有什么不對的地方,或者還有什么方法我沒有寫到,希望大家可以提出來,謝謝。

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

轉載請注明本文地址：http://m.hztianpu.com/yun/103504.html

相關文章

  • Docker的八種用途

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

    lindroid 評論0 收藏0

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

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

    2501207950 評論0 收藏0

  • 簡述Java內存模型

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

    ACb0y 評論0 收藏0

  • 八種常見排序算法細講

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

    hiyang 評論0 收藏0

  • 2018年，前端應該怎么學？

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

    AnthonyHan 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<