Vue組件數(shù)據(jù)傳遞與props校驗(yàn)方式

更新時(shí)間：2024年08月15日 15:18:27 作者：專注寫bug

這篇文章主要介紹了Vue組件數(shù)據(jù)傳遞與props校驗(yàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

前言

組件與組件之間并不是完全獨(dú)立的，他們之間可以進(jìn)行一些數(shù)據(jù)的傳遞操作。

傳遞數(shù)據(jù)的解決方案就是props選項(xiàng)。

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

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

比如定義兩個(gè)頁面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ù)組類型，其中保存父級(jí)傳入子級(jí)數(shù)據(jù)時(shí)，標(biāo)簽上的屬性名稱
 props:["msg","title"]
}
</script>
<style scoped>
.div{
 border: 1px solid;
}</style>

>Parent.vue

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

案例效果展示：

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

如果按照J(rèn)ava語言理解，就很簡單。
萬物皆對(duì)象。既然字符串是這種方式，那么其他類型也大差不差了！

直接看例子：

Parent.vue

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

注意事項(xiàng)

props傳遞數(shù)據(jù)操作時(shí)，只能從父級(jí)傳遞至子級(jí)中，即：從外至內(nèi)。
不能反其道而行！

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

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

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

比如父級(jí)中傳遞的userAge是String類型，若子級(jí)組件中定義的是Number類型。

則會(huì)出現(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)報(bào)錯(cuò)，所以此處手動(dòng)注入
 components:{
  // key-value 結(jié)構(gòu)   別名：對(duì)應(yīng)引入子類
  ComponentBDemo:ComponentB
 }
}
</script>

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

ComponentB.vue

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

運(yùn)行后，瀏覽器查看顯示效果。

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

當(dāng)然，在子級(jí)組件中，可以針對(duì)多個(gè)可能的類型進(jìn)行限制，比如滿足傳入的數(shù)據(jù)是String或Number等。

修改子級(jí)組件ComponentB.vue

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

刷新瀏覽器，查看信息。

給定默認(rèn)值 default

如果子級(jí)組件中定義了某個(gè)變量的顯示項(xiàng)，但在父級(jí)中未傳入對(duì)應(yīng)的值，此時(shí)子級(jí)組件在渲染顯示的時(shí)候，不會(huì)將該變量標(biāo)簽進(jìn)行顯示。

ComponentB.vue

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

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

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

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

核心就是針對(duì)未傳遞值的變量增加default標(biāo)識(shí) 。

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

此時(shí)頁面的顯示效果如下所示：

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

>ComponentA.vue

此時(shí)瀏覽器中的顯示效果如下所示：

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

驗(yàn)證數(shù)組類型的數(shù)據(jù)默認(rèn)值定義。

<template>
 <h1>子級(jí)組件</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 // 限定單個(gè)類型
   type:[Number,String,Object,Array]
  },
  userName:{
   type:String,
   default:"父級(jí)未傳遞值，默認(rèn)顯示這句話！"
  },
  arrays:{ // 數(shù)組類型的變量
   type:Array,
   default(){ // 工廠函數(shù)返回默認(rèn)對(duì)象
    return ["這只是默認(rèn)的數(shù)組展示項(xiàng)"]
   }
  }
 }
}
</script>

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

指定必選項(xiàng) required

在上面說了一個(gè)顯示效果：

如果父級(jí)未傳遞指定變量數(shù)據(jù)，則在子級(jí)組件中會(huì)渲染對(duì)應(yīng)的標(biāo)簽，但不會(huì)給變量賦值！
如果必須強(qiáng)制指定必須傳遞對(duì)應(yīng)的值，此時(shí)則需要使用到required:true標(biāo)識(shí)。

如下所示：

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

<template>
 <h1>子級(jí)組件</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 // 限定單個(gè)類型
   type:[Number,String,Object,Array]
  },
  userName:{
   type:String,
   default:"父級(jí)未傳遞值，默認(rèn)顯示這句話！"
  },
  arrays:{
   type:Array,
   default(){
    return ["這只是默認(rèn)的數(shù)組展示項(xiàng)"]
   }
  },
  msg:{ // 父級(jí)未傳遞該變量
   type:String,
   required:true
  }
 }
}
</script>

此時(shí)瀏覽器中的顯示效果如下：