淺談Vue中組件傳值的幾種方式


Vue中傳值主要分為兩部分
父子通信
    1.父傳子
    傳遞:當子組件在父組件中當做標簽使用的時候,通過給子組件綁定一個自定義屬性,值為需要傳遞的數據
      接收:在子組件內部通過props進行接收
            接收的方式有2種 一種是數組接收  另一種是對象接收
            一般情況下我們都使用對象進行接收,因為對象接收可以校驗數據的類型
            例子
              props:["val"];
              props:{
                val:String
              }
    2. 子傳父
       傳遞:當子組件給父組件傳遞數據的時候,通過調用父組件給子組件綁定的自定義事件,然后將值傳遞過去
      接收:父組件通過自定義事件的函數來接收子組件傳遞過來的數據(注意這個自定義方法的函數在綁定的時候不需要加())
      (2)、作用域插槽 
    帶參數的插槽
          反向傳值
            將子組件的數據傳遞給父組件,只需要給組件內部的slot綁定一個自定義屬性
            在父組件中,子組件標簽的內部書寫一個template標簽,通過scpoe來接收子組件傳遞過來的數據
非父子
       1、在vue的原型身上添加一個公共的vue實例,組件之間調用這個公共的實例的$on/$emit來傳遞數據  傳遞的一方調用
        $emit  接收值的一方調用$on;
      2、手動封裝$on $emit $off--->原理應用了觀察者模式
      3、EventBus
      4、vuex


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM