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

Vue中傳值主要分爲兩部分

父子通訊

    1.父傳子

    傳遞：當子組件在父組件中當作標籤使用的時候,經過給子組件綁定一個自定義屬性，值爲須要傳遞的數據

      接收：在子組件內部經過props進行接收

            接收的方式有2種 一種是數組接收  另外一種是對象接收

            通常狀況下咱們都使用對象進行接收，由於對象接收能夠校驗數據的類型

            例子

              props:["val"];

              props:{

                val:String

              }

    2. 子傳父

       傳遞:當子組件給父組件傳遞數據的時候，經過調用父組件給子組件綁定的自定義事件，而後將值傳遞過去

      接收：父組件經過自定義事件的函數來接收子組件傳遞過來的數據(注意這個自定義方法的函數在綁定的時候不須要加())

      （2）、做用域插槽　

　　　　帶參數的插槽

      　　　　反向傳值

        　　　　將子組件的數據傳遞給父組件，只須要給組件內部的slot綁定一個自定義屬性

        　　　　在父組件中，子組件標籤的內部書寫一個template標籤，經過scpoe來接收子組件傳遞過來的數據

非父子

       一、在vue的原型身上添加一個公共的vue實例，組件之間調用這個公共的實例的$on/$emit來傳遞數據  傳遞的一方調用

        $emit  接收值的一方調用$on;

      二、手動封裝$on $emit $off--->原理應用了觀察者模式

      三、EventBus

      四、vuex