Vue——组件数据传递与props校验

于 2024-06-05 21:18:27 发布
阅读量696 收藏 25
点赞数 26
分类专栏： VUE 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38322527/article/details/139455898
版权

文章目录

前言

组件与组件之间并不是完全独立的，他们之间可以进行一些数据的传递操作。传递数据的解决方案就是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值。

专注写bug
关注
专栏目录
vue之父子组件传值验证
john的博客
07-21 297
普通父子组件传值 const app = Vue.createApp({ data(){ return{ message:'hello world', num:110 } }, template:'<div>{{message}} <test :num="num"></test></div>', }); app.component('test',{
vue——组件参数校验与非Props特性
weixin_54362381的博客
08-23 651
组件参数校验与非Props特性 1、组件参数校验：父组件向子组件传递的数据，子组件有权对这些数据进行约束。 要进行约束的话，props就要是一个对象而不是数组，对象的键就是接收的参数的名字，对象的值是接收的参数需要满足的条件。 <div id="root"> <child :content="'hello world'"></child> </div> <script> Vue.component('child',{ //参数校验 //1、
vue检测props是否传递
zhu_menglu的博客
04-24 683
【代码】vue检测props是否传递。
校验vue prop的几种方式
qq_42880714的博客
08-11 2451
校验vue prop的几种方式
vue 父子组件传值 props验证
weixin_42448623的博客
08-16 446
props文档 示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>父子组件传值_props验证 </title> <script src="./vue.
vue 组件的参数校验props
qq_37550440的博客
02-12 632
props特性：在dom 不显示属性msg（自定义） 非props特性：在dom中会显示属性 父组件home <template> <div> <h1>home组件</h1> <!-- 没有加v-bind 传的值永远是字符串 --> <!-- <child msg='123'></child> --> <child1 :msg=
VUE——组件
Euniceing的博客
11-13 989
vue之组件
vue基础知识笔记（二）—— 组件
weixin_51341611的博客
03-04 1144
vue基础知识笔记——组件详解，持续更新中。
VUE之组件（Props特性深析）
weixin_45626166的博客
10-28 633
Prop命名风格 【前言】 创建一个博文组件，如果你不能向这个组件传递某一篇博文的标题或内容之类的我们想展示的数据的话，它是没有办法使用的，这也正是 prop 的由来。 Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。为了给博文组件传递一个标题，我们可以用一个 props 选项将其包含在该组件可接受的 prop 列表中 注...
Vue中父子组件数据传递
传播有益的技术文章，力求精准、专业、专心、专享
06-05 596
当v-bind绑定是一个对象字面量时，对象的所有属性都会被当前props传入，而且组件属性名与对象属性名一至，此时，可以使用无参的v-bind来简化属性绑定，即只使用v-bind而不需要使用:prop-name绑定形式。Vue中，父子组件数据传递应遵循单向数据流原则，比如，构建一个博客，可能需要一个表示博客文章的组件，并且，所有的博客文章使用相同的视觉布局，但内容却不相同。原则，props 因父组件的更新而变化，自然地将新的状态向下流往子组件，而不会逆向传递。类型的 props 有特别的类型转换规则。
Vue的props验证
苦涩精灵的博客
10-07 1112
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="libs/vue.js"></script> </head> <body> <div id="app"> <label>n:<input type="text" v-mo
props传值方式和校验
陌上花开然不归矣
07-11 1592
prop 的大小写 HTML 中的 attribute 名是大小写不敏感的， 所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时， camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名，千万不要理解错哦，只有以下场景才是满足的哟 <component-prop postTitle="title" post-name="name" ></component-prop&g
vue快速入门（三十六）组件通信-子传父
不起眼小菜菜的博客
04-21 596
注释很详细，直接上代码……
vue组件的props进行数据验证
奔跑的面条博客
11-05 655
组件之间传值使用的是props，但是我们也可以进行数据校验。 Vue.component("my-component",{ props:{ //数字类型 propA: Number, //必须是数字或者字符串类型 propB: [String, Number], //布尔值，默认为true propC: { type: Boolean, default: tr...
Vue05/Vue组件子传父、props校验、Vue父子组件传值总结
m0_64494670的博客
11-01 767
Vue05/Vue组件子传父、props校验、Vue父子组件传值总结
props 校验
m0_71902265的博客
11-15 171
React：props 校验、props默认值
props校验
最新发布
srr0725的博客
06-05 227
掌握组件props的校验写法，增加组件的健壮性。对于组件来说，props是由外部传入的，我们其实无法保证组件使用者传入了什么格式的数据，如果传入的数据格式不对，就有可能会导致组件内部错误 —— 组价的使用者可能也不知道为什么报错~代码测试。
验证 Vue Props 类型，这几种方式你可能还没试用过
油墨香^-^的博客
08-30 3630
随着应用程序规模的扩大，类型检查是防止错误的第一道防线。结合TypeScript，它可以让你对正确使用组件接口有很高的信心，减少bug，提高整体代码质量和开发体验。
验证 Vue Props 类型，你这几种方式你可能还没试用过
粉丝们务必加入微信粉丝群
08-30 1123
随着应用程序规模的扩大，类型检查是防止错误的第一道防线。结合TypeScript，它可以让你对正确使用组件接口有很高的信心，减少bug，提高整体代码质量和开发体验。作者：Fotis Adamakis 译者：前端小智 来源：mediun原文：https://fadamakis.mdium.com/validating-yur-vue-props-like-a-pro-5a2d0ed2b2d6。...
Vue组件间数据传递：props、events与eventbus
"本文主要探讨了Vue.js框架中组件间数据传递的方法，包括父组件向子组件传递数据、子组件向父组件传递数据以及同级组件间的数据传递。" 在Vue.js中，组件的设计原则是每个组件都有其独立的作用域，这意味着在组件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值