Vue组件数据传递与props校验方式

更新时间：2024年08月15日 15:18:27 作者：专注写bug

这篇文章主要介绍了Vue组件数据传递与props校验方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

前言

组件与组件之间并不是完全独立的，他们之间可以进行一些数据的传递操作。

传递数据的解决方案就是props选项。

组件数据传递的几种类型

简单字符串类型数据专递

比如定义两个页面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 数组类型，其中保存父级传入子级数据时，标签上的属性名称
 props:["msg","title"]
}
</script>
<style scoped>
.div{
 border: 1px solid;
}</style>

>Parent.vue

<template>
 <h1>父类组件</h1><br>
 <ChildDemo msg="专注写bug 父级传入子级数据" :title="tittleMsg"/>
</template>
<script>
// 父类中引入子类
import Child from './Child.vue';
export default{
 data(){
  return{
    tittleMsg:"父级传入子级信息2"
  }
 },
 // script 增加 setup，则不能写逻辑，出现报错，所以此处手动注入
 components:{
  // key-value 结构   别名：对应引入子类
  ChildDemo:Child
 }
}
</script>

案例效果展示：

其他类型数据(数字、数组、对象)传递

如果按照Java语言理解，就很简单。
万物皆对象。既然字符串是这种方式，那么其他类型也大差不差了！

直接看例子：

Parent.vue

<template>
 <h1>父类组件</h1><br>
 <ChildDemo msg="专注写bug 父级传入子级数据" 
  :title="tittleMsg" 
  :age="userAge" 
  :arrays="userLists" 
  :userInfo="userInfos" />
</template>
<script>
// 父类中引入子类
import Child from './Child.vue';
export default{
 data(){
  return{
    tittleMsg:"父级传入子级信息2", // 字符串
    userAge:28, // number 数字类型
    userLists:["lilei","jack","tom"], // 数组类型
    userInfos:{  // object 对象类型
     id:5173,
     name:"lilei"
    }
  }
 },
 // script 增加 setup，则不能写逻辑，出现报错，所以此处手动注入
 components:{
  // key-value 结构   别名：对应引入子类
  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传递数据操作时，只能从父级传递至子级中，即：从外至内。
不能反其道而行！

数据传递值校验

在上面的案例中，父级组件Parent.vue向子级组件Child.vue进行了传递数据测试。
除了能满足数据传递之外，props还能针对传递的数据限定类型、若不存在填充默认值等操作。

限定数据类型 type

比如父级中传递的userAge是String类型，若子级组件中定义的是Number类型。

则会出现什么样的问题呢？看下面的案例。

ComponentA.vue

<template>
 <h1>父类组件</h1><br>
 <ComponentBDemo 
  :age="userAge"  />
</template>
<script>
// 父类中引入子类
import ComponentB from './ComponentB.vue';
export default{
 data(){
  return{
    userAge:"28", // 传递字符串类型
  }
 },
 // script 增加 setup，则不能写逻辑，出现报错，所以此处手动注入
 components:{
  // key-value 结构   别名：对应引入子类
  ComponentBDemo:ComponentB
 }
}
</script>

在子级组件中的props换一个写法，指定数据的类型。

ComponentB.vue

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

运行后，浏览器查看显示效果。

【发现】限定类型后，父级组件传递的是String类型，但子级组件限定的是Number类型，类型不一致出现了警告！

当然，在子级组件中，可以针对多个可能的类型进行限制，比如满足传入的数据是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

如果子级组件中定义了某个变量的显示项，但在父级中未传入对应的值，此时子级组件在渲染显示的时候，不会将该变量标签进行显示。

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:"父级未传递值，默认显示这句话！"
  }
 }
}

此时页面的显示效果如下所示：

如果父级传递了数据。那么显示效果又是怎么样的呢？

>ComponentA.vue

此时浏览器中的显示效果如下所示：

【注意】数字Number和字符串String类型，可以直接指定default默认值。如果是对象或者数组类型，则需要使用工厂函数返回默认值！

验证数组类型的数据默认值定义。

<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 ["这只是默认的数组展示项"]
   }
  }
 }
}
</script>

数组类型默认值展示效果：

指定必选项 required

在上面说了一个显示效果：

如果父级未传递指定变量数据，则在子级组件中会渲染对应的标签，但不会给变量赋值！
如果必须强制指定必须传递对应的值，此时则需要使用到required:true标识。

如下所示：

父级未传递值msg，子级组件对应变量指定必传！

<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 ["这只是默认的数组展示项"]
   }
  },
  msg:{ // 父级未传递该变量
   type:String,
   required:true
  }
 }
}
</script>

此时浏览器中的显示效果如下：

丢失必选项msg值。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue + Scss 动态切换主题颜色实现换肤的示例代码
这篇文章主要介绍了Vue + Scss 动态切换主题颜色实现换肤的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-04-04
vue结合el-upload实现腾讯云视频上传功能
这篇文章主要介绍了vue结合el-upload实现腾讯云视频上传功能，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-07-07
$关于el-tooltip使用\n换行的情况显示$
关于el-tooltip使用\n换行的情况显示
这篇文章主要介绍了关于el-tooltip使用\n换行的情况显示,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-04-04
vue中如何实现pdf文件预览的方法
这篇文章主要介绍了vue中如何实现pdf文件预览的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
Nuxt.js实战详解
这篇文章主要介绍了Nuxt.js实战详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-01-01
Vue 调用摄像头扫描条码功能实现代码
本文介绍了如何使用Vue.js和jsQR库来实现调用摄像头并扫描条码的功能,通过安装依赖、获取摄像头视频流、解析条码等步骤,实现了从开始扫描到停止扫描的完整流程,同时,还强调了浏览器兼容性、HTTPS环境、权限问题和性能优化的重要性,感兴趣的朋友一起看看吧
2025-03-03
使用Vue3和Vite实现对低版本浏览器的兼容
在使用Vite和Vue3构建的JavaScript项目中,确保对低版本浏览器的兼容性是一个重要的考虑因素,以下是一些具体的解决方案和步骤,可以帮助你实现这一目标,需要的朋友可以参考下
2024-11-11
Vue脚手架安装时遇到的无法安装问题详解
开发中遇到bug是在正常不过了,而程序也基本都是bug堆里爬出来的,下面这篇文章主要给大家介绍了关于Vue脚手架安装时遇到的无法安装问题的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-07-07
go-gin-vue3-elementPlus带参手动上传文件的案例代码
这篇文章主要介绍了go-gin-vue3-elementPlus带参手动上传文件的案例代码,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2023-11-11
Vue 框架之键盘事件、健值修饰符、双向数据绑定
这篇文章主要介绍了Vue 框架之键盘事件、健值修饰符、双向数据绑定问题，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-11-11