前言

組件與組件之間并不是完全獨立的，他們之間可以進行一些數(shù)據(jù)的傳遞操作。傳遞數(shù)據(jù)的解決方案就是props選項。

組件數(shù)據(jù)傳遞的幾種類型

簡單字符串類型數(shù)據(jù)專遞

比如定義兩個頁面Parent.vue和Child.vue，其中Parent.vue包含Child.vue。

Child.vue

<template><div class="div"><h1>子類組件</h1><br><p>msg: {{ msg }}</p><br><p>title: {{ title }}</p><br></div></template>
<script>
export default{data(){return{}},// props 數(shù)組類型，其中保存父級傳入子級數(shù)據(jù)時，標簽上的屬性名稱props:["msg","title"]
}
</script>
<style scoped>
.div{border: 1px solid;
}</style>

---

>Parent.vue

<template><h1>父類組件</h1><br><ChildDemo msg="專注寫bug 父級傳入子級數(shù)據(jù)" :title="tittleMsg"/>
</template>
<script>
// 父類中引入子類
import Child from './Child.vue';
export default{data(){return{tittleMsg:"父級傳入子級信息2"}},// script 增加 setup，則不能寫邏輯，出現(xiàn)報錯，所以此處手動注入components:{// key-value 結(jié)構(gòu)   別名：對應(yīng)引入子類ChildDemo:Child}
}
</script>

案例效果展示：

其他類型數(shù)據(jù)(數(shù)字、數(shù)組、對象)傳遞

如果按照Java語言理解，就很簡單。

萬物皆對象。既然字符串是這種方式，那么其他類型也大差不差了！

直接看例子：

Parent.vue

<template><h1>父類組件</h1><br><ChildDemo msg="專注寫bug 父級傳入子級數(shù)據(jù)" :title="tittleMsg" :age="userAge" :arrays="userLists" :userInfo="userInfos" />
</template>
<script>
// 父類中引入子類
import Child from './Child.vue';
export default{data(){return{tittleMsg:"父級傳入子級信息2", // 字符串userAge:28, // number 數(shù)字類型userLists:["lilei","jack","tom"], // 數(shù)組類型userInfos:{  // object 對象類型id:5173,name:"lilei"}}},// script 增加 setup，則不能寫邏輯，出現(xiàn)報錯，所以此處手動注入components:{// key-value 結(jié)構(gòu)   別名：對應(yīng)引入子類ChildDemo:Child}
}
</script>

Child.vue

<template><div class="div"><h1>子類組件</h1><br><p>msg: {{ msg }}</p><br><p>title: {{ title }}</p><br><p>age: {{ age }}</p><br><ul><li v-for="(item,index) of arrays" :key="index">{{ item }}</li></ul><p>用戶基本信息編號：{{ userInfo.id  }} </p><p>用戶基本信息名稱： {{ userInfo.name }}</p></div></template>
<script>
export default{data(){return{}},props:["msg","title","age","arrays","userInfo"]
}
</script>
<style scoped>
.div{border: 1px solid;
}</style>

注意事項

props傳遞數(shù)據(jù)操作時，只能從父級傳遞至子級中，即：從外至內(nèi)。

不能反其道而行！

數(shù)據(jù)傳遞值校驗

在上面的案例中，父級組件Parent.vue向子級組件Child.vue進行了傳遞數(shù)據(jù)測試。除了能滿足數(shù)據(jù)傳遞之外，props還能針對傳遞的數(shù)據(jù)限定類型、若不存在填充默認值等操作。

限定數(shù)據(jù)類型 type

比如父級中傳遞的userAge是String類型，若子級組件中定義的是Number類型。則會出現(xiàn)什么樣的問題呢？看下面的案例。

ComponentA.vue

<template><h1>父類組件</h1><br><ComponentBDemo :age="userAge"  />
</template>
<script>
// 父類中引入子類
import ComponentB from './ComponentB.vue';
export default{data(){return{userAge:"28", // 傳遞字符串類型}},// script 增加 setup，則不能寫邏輯，出現(xiàn)報錯，所以此處手動注入components:{// key-value 結(jié)構(gòu)   別名：對應(yīng)引入子類ComponentBDemo:ComponentB}
}
</script>

在子級組件中的props換一個寫法，指定數(shù)據(jù)的類型。

ComponentB.vue

<template><h1>子級組件</h1><br><p>age: {{ age }}</p><br>
</template>
<script>
export default{data(){return{}},props:{age:{ // 限定類型type:Number}}
}
</script>

運行后，瀏覽器查看顯示效果。

【發(fā)現(xiàn)】限定類型后，父級組件傳遞的是String類型，但子級組件限定的是Number類型，類型不一致出現(xiàn)了警告！

當然，在子級組件中，可以針對多個可能的類型進行限制，比如滿足傳入的數(shù)據(jù)是String或Number等。
修改子級組件ComponentB.vue

<template><h1>子級組件</h1><br><p>age: {{ age }}</p><br>
</template>
<script>
export default{data(){return{}},props:{age:{//type:Number // 限定單個類型type:[Number,String,Object,Array] // 支持多種類型范圍}}
}
</script>

刷新瀏覽器，查看信息。

給定默認值 default

如果子級組件中定義了某個變量的顯示項，但在父級中未傳入對應(yīng)的值，此時子級組件在渲染顯示的時候，不會將該變量標簽進行顯示。

ComponentB.vue

<template><h1>子級組件</h1><br><p>age: {{ age }}</p><br><p>{{ userName }}</p><br>
</template>
<script>
export default{data(){return{}},props:{age:{//type:Number // 限定單個類型type:[Number,String,Object,Array]},userName:{type:String}}
}
</script>

子級組件定義userName變量的顯示，但父級未傳遞值，此時瀏覽器中的顯示信息如下：

如果說父級組件未傳遞值時，需要子級組件中默認顯示一些信息，可以寫成下面這種形式。

<template><h1>子級組件</h1><br><p>age: {{ age }}</p><br><p>{{ userName }}</p><br>
</template>
<script>
export default{data(){return{}},props:{age:{//type:Number // 限定單個類型type:[Number,String,Object,Array]},userName:{type:String,default:"父級未傳遞值，默認顯示這句話！"}}
}
</script>

核心就是針對未傳遞值的變量增加default標識 。

export default{data(){return{}},props:{age:{//type:Number // 限定單個類型type:[Number,String,Object,Array]},userName:{type:String,default:"父級未傳遞值，默認顯示這句話！"}}
}

此時頁面的顯示效果如下所示：

---

如果父級傳遞了數(shù)據(jù)。那么顯示效果又是怎么樣的呢？ >ComponentA.vue

此時瀏覽器中的顯示效果如下所示：

【注意】數(shù)字Number和字符串String類型，可以直接指定default默認值。如果是對象或者數(shù)組類型，則需要使用工廠函數(shù)返回默認值！

驗證數(shù)組類型的數(shù)據(jù)默認值定義。

<template><h1>子級組件</h1><br><p>age: {{ age }}</p><br><p>{{ userName }}</p><br><ul><li v-for="(item,index) of arrays" :key="index">{{ item }}</li></ul>
</template>
<script>
export default{data(){return{}},props:{age:{//type:Number // 限定單個類型type:[Number,String,Object,Array]},userName:{type:String,default:"父級未傳遞值，默認顯示這句話！"},arrays:{ // 數(shù)組類型的變量type:Array,default(){ // 工廠函數(shù)返回默認對象return ["這只是默認的數(shù)組展示項"]}}}
}
</script>

數(shù)組類型默認值展示效果：

指定必選項 required

在上面說了一個顯示效果：

如果父級未傳遞指定變量數(shù)據(jù)，則在子級組件中會渲染對應(yīng)的標簽，但不會給變量賦值！

如果必須強制指定必須傳遞對應(yīng)的值，此時則需要使用到required:true標識。如下所示：

父級未傳遞值msg，子級組件對應(yīng)變量指定必傳！

<template><h1>子級組件</h1><br><p>age: {{ age }}</p><br><p>{{ userName }}</p><br><ul><li v-for="(item,index) of arrays" :key="index">{{ item }}</li></ul>
</template>
<script>
export default{data(){return{}},props:{age:{//type:Number // 限定單個類型type:[Number,String,Object,Array]},userName:{type:String,default:"父級未傳遞值，默認顯示這句話！"},arrays:{type:Array,default(){return ["這只是默認的數(shù)組展示項"]}},msg:{ // 父級未傳遞該變量type:String,required:true}}
}
</script>

此時瀏覽器中的顯示效果如下：

丟失必選項msg值。