vue.js 組件 之 prop 傳遞數據

為何需要prop

在一個父組件包含一個子組件時，父組件和子組件一般來說都需要溝通交流。且通常情況下，是父組件傳遞數據給特定的子組件，由特定的子組件負責特定的邏輯處理得出特定的值。父組件給子組件傳遞數據這一過程就是通過為子組件設置prop實現的。使用prop的另一個原因是每個組件的作用域都是相互獨立的，即使是父級組件和子級組件的關系。所以就由prop承擔起父級組件向子級組件傳遞數據這一重任。

prop需要提前聲明

比如我們定義的組件需要通過a屬性獲得父組件傳遞的數據就必須像這樣先聲明

Vue.component("cpt",{ template:"<div>{{messageByA}}</div>" ,prop:["a"] }); <parentComponent> <cpt a="a"></cpt> </parentComponent> 

輸出為：

<parentComponent>
<div>a</div>
</parentComponent>

需要注意的是當我們在props數組中使用駱駝標記法，我們在書寫html時必須使用短橫線分隔標記法，就像這樣

props:["someProp"]      //someProp駱駝標記法

<cpt some-prop="someValue"></cpt>       //some-prop短橫線分隔標記法

給prop綁定靜態值與動態值

綁定靜態值

<cpt some-prop="db"></cpt>      //綁定靜態值字符串"db"

綁定動態值

//#el為一個vue實例且data中設置了db屬性
<div id="el">
<cpt :some-prop="db"></db>
</div>

綁定靜態值時常常會認為這樣是傳遞了數字

<cpt some-prop="5"></cpt>

其實是傳遞了字符串“5”，下面這種方式也是傳遞了字符串“5”

<cpt some-prop=5></cpt>

如果我們想傳遞一個數字5該怎么辦呢？

<cpt :some-prop="5"></cpt>      //傳遞了數字5

為什么會這樣呢？因為:some-prop是vue的指令，會將字符串里的作為表達式計算得到返回值，因此就為數字5
還有一種情況值得注意：

<div id="d"><db s=5></db></div>
<script> let d=new Vue({ el:"#d" ,components:{ db:{ props:["s"] ,template:`<div>${s}</div>` //此處為模板字符串相當於"<div>"+s+"</div>" } } }); </script>

結果為頁面上顯示undefined。這是因為js運行到template那一行時，vue尚未實例化結束，其局部化定義的組件db也沒有實例化完成，也就不要說去接收給db組件傳遞的s屬性的值這一操作了,此時，s為undefined。
正確操作：

<div id="d"><db s=5></db></div> <script> let d=new Vue({ el:"#d" ,components:{ db:{ props:["s"] ,template:`<div>{{s}}</div>` } } }); </script>

這是操作步驟變為
1.vue實例和db組件實例化結束。
2.db組件接收儲存字符串“5”作為s的值
3.<div id="d"><db s=1></db></div>變為<div id="d"><div>{{s}}</div></div>
4.計算s在db組件中查找s的值
5.最終結果為<div id="d"><div>5</div></div>

對prop值進一步操作

我們有些現對prop值進行進一步操作加工，可以通過computed來實現

props:["someProp"]
,computed:{
    key:function(){
        return someProp+1;//對someProp進行加一操作返回
    }
}

注意獲取到的prop值如果為object（array也是object的一種），將保有對此對象的引用，對此對象進行更改會造成其他持有此對象的受到影響。

對傳入的prop值進行驗證

話不多說直接上代碼

Vue.component("cpt",{
    template:...
    ,props:{
        p:{
            type:Object//此處為一構造函數，操作為p instanceOf 構造函數
            ,required:true/false//是否必須輸入true為必須
            ,defalut:value/function//設置默認值可以為直接值也可以為返回值的函數
        }
    }
});

也可以這樣寫的簡單點

props:{
    p:Object//直接些構造函數名，不要必須輸入，輸入的話會用instanceOf判斷
    ,p1:[Object,Number]//多個構造函數，可以輸入多個類型的值
}

也可以自定義檢測函數

props:{ p:{ validate:fucntion(v){ return v%2==0;//輸入的值必須為偶數 }
    }
}