vue前端开发自学练习,Props数据传递-类型校验,默认值的设置!

 vue前端开发自学练习,Props数据传递-类型校验,默认值的设置!

实际上,vue开发框架的时候,充分考虑到了前端开发人员可能会遇到的各种各样的情况,比如大家经常遇到的,数据类型的校验,再比如,默认值的设定等等。下面给大家展示一下,源码。和实际的效果。

<template><h3>CompontA</h3><CompontB :title="title" />
</template>
<script>
import CompontB from './CompontB.vue';export default{data(){return{title:"新闻标题"}},components:{CompontB}}</script>

如图,以上是CompontA.vue的源码内容,里面有一个动态数据,title,如果父组件传递给了子组件,那么,就可以在子组件内正常显示出来这个信息了。如果不传递,子组件里,自定义的默认值就会生效了。

如图,这是成功拿到了父组件传递的信息 ,下面是父组件不穿值的情况下,显示了子组件自己定义的一个默认值的情况。

<template><h3>CompontB</h3><p>{{ title }}</p><hr><ul><li v-for="(item,index) of names " :key="index">{{ item }}</li></ul>
</template>
<script>
import Child from "./Child.vue"export default{data(){return {}},props:{title:{type:String,default:"默认新闻标题文本"},names:{type:Array,default(){return ["数组默认内容","默认数组内容2"]}}}}
</script>

如图,以上代码是CompontB.vue(子组件的代码内容),里面可以看到,我们设置了一些类型的校验和默认值的信息。如果父组件不传递的情况,就会显示我们的默认值。

如图,这是默认值的信息 显示出来了。


下面介绍一下,其他的类型默认值的定义情况,比如,数组,对象都需要借助于函数的形式来定义默认值。【数字,字符串,可以直接定义默认值】。

<template><h3>CompontA</h3><CompontB  :names="names"/>
</template>
<script>
import CompontB from './CompontB.vue';export default{data(){return{title:"新闻标题",names:["admin","guest"]}},components:{CompontB}}</script>

以上代码,在父组件内,定义了数组类型的数据!想传递给子组件。

如图,子组件确实拿到了传递过来的信息。

如图,如果父不传递的时候,子组件会显示,自己定义好的,默认内容。

欢迎大家交流VUE知识点。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/238518.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

leetcode 349 两个数组的集合

题目 给定两个数组 nums1 和 nums2 &#xff0c;返回 它们的交集 。输出结果中的每个元素一定是 唯一 的。我们可以 不考虑输出结果的顺序 。 示例 1&#xff1a; 输入&#xff1a;nums1 [1,2,2,1], nums2 [2,2] 输出&#xff1a;[2] 示例 2&#xff1a; 输入&#xff1a…

【51单片机系列】51单片机的中断系统使用总结一

本文是在学习51单片机的中断系统的简单性总结&#xff0c;着重于51单片机的中断系统的工作原理及如何使用。 文章目录 一、中断原理简单介绍二、 外部中断相关介绍2.1 与外部中断相关的寄存器2.2、外部中断0使用示例2.3、外部中断1使用示例 三、定时器中断相关介绍3.1、51单片机…

基于多反应堆的高并发服务器【C/C++/Reactor】(中)HttpRequest模块 解析http请求协议

一、HTTP响应报文格式 HTTP/1.1 200 OK Bdpagetype: 1 Bdqid: 0xf3c9743300024ee4 Cache-Control: private Connection: keep-alive Content-Encoding: gzip Content-Type: text/html;charsetutf-8 Date: Fri, 26 Feb 2021 08:44:35 GMT Expires: Fri, 26 Feb 2021 08:44:35 GM…

python 爬虫 request get或post传参

爬虫传参 import requestsurl http://www.xxx# get 或 post 传参数据 data {"pageNo": 1652,"pageSize": 10, }headers {Cookie: ,Host: ,Origin: ,Referer: ,User-Agent: , }# get 请求 # res requests.get( # url, # paramsdata, # hea…

获取本地IP网卡信息

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、获取本地IP&#xff0c;以及全部网卡信息总结 前言 一、获取本地IP&#xff0c;以及全部网卡信息 const os require(node:os) function getIPAdress(){/…

UML-用例图

提示&#xff1a;用例图是软件建模的开始&#xff0c;软件建模中的其他图形都将以用例图为依据。用例图列举了系统所需要实现的所有功能&#xff0c;除了用于软件开发的需求分析阶段&#xff0c;也可用于软件的系统测试阶段。 UML-用例图 一、用例图的基础知识1.用例图的构成元…

接口测试总结(2024版)

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 点击文末小卡片 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;薪资嘎嘎涨 1、什么是接口测试 顾名思义&#xff0c;接口测试是对系统或组件之间的接口进行测试&#xf…

Android 事件机制探讨(1)

事件的传递主要有三个方法&#xff1a;dispatchTouchEvent(事件分发)、onInterceptTouchEvent(事件拦截)、onTouchEvent(事件消费)。如下图&#xff1a; 仔细看的话&#xff0c;图分为3层&#xff0c;从上往下依次是Activity、ViewGroup、View事件从左上角那个白色箭头开始&…

HarmonyOS 开发基础(八)Row和Column

HarmonyOS 开发基础&#xff08;八&#xff09;Row和Column 一、Column 容器 1、容器说明&#xff1a; 纵向容器主轴方向&#xff1a;从上到下纵向交叉轴方向&#xff1a;从左到右横向 2、容器属性&#xff1a; justifyContent&#xff1a;设置子元素在主轴方向的对齐格式…

Windows安装Rust环境(详细教程)

一、 安装mingw64(C语言环境) Rust默认使用的C语言依赖Visual Studio&#xff0c;但该工具占用空间大安装也较为麻烦&#xff0c;可以选用轻便的mingw64包。 1.1 安装地址 (1) 下载地址1-GitHub&#xff1a;Releases niXman/mingw-builds-binaries GitHub (2) 下载地址2-W…

BIOS知识枝桠——RAID 磁盘阵列

文章目录 前言一、RAID介绍二、RAID等级分类1.RAID02.RAID13.RAID24.RAID3和RAID45.RAID5和RAID66.RAID77.RAID10 BIOS下组建RAID 前言 假设存在多块磁盘&#xff0c;如果不组建阵列&#xff0c;磁盘与磁盘之间是没有任何关系的。磁盘A和B&#xff0c;放在A中的文件与B磁盘没有…

知识付费saas租户平台:揭秘成功的密码

明理信息科技知识付费saas租户平台 随着互联网的快速发展&#xff0c;人们越来越重视知识的获取和价值的挖掘。在这个信息爆炸的时代&#xff0c;知识付费已经成为了一种新的商业模式&#xff0c;为知识的传播和价值的转化提供了更加高效和便捷的途径。本文将探讨知识付费的发…

数据库第一次作业

1.创建一个英雄表 create table t_hero ( id int primary key auto_increment, name varchar(10) unique not null, gender char(5) check (gender in (男,女)), grade char(5) default 5星, groups char(5) check (groups in (毁灭,巡猎,智识,存护,…

毕业设计:基于python微博舆情分析系统+可视化+Django框架 K-means聚类算法(源码)✅

毕业设计&#xff1a;2023-2024年计算机专业毕业设计选题汇总&#xff08;建议收藏&#xff09; 毕业设计&#xff1a;2023-2024年最新最全计算机专业毕设选题推荐汇总 &#x1f345;感兴趣的可以先收藏起来&#xff0c;点赞、关注不迷路&#xff0c;大家在毕设选题&#xff…

2019年江苏省职教高考计算机技能考试——一道改错题的分析

题目&#xff1a;函数将str字符串中的5个数字字符串转换为整数&#xff0c;并保存在二维数组m的最后一行&#xff0c;各元素为3、-4、16、18、6。并经函数move处理后&#xff0c;运行结果如下&#xff1a; 18 6 3 -4 16 16 18 6 3 -4 -4 16 …

web缓存之nginx缓存

一、nginx缓存知识 网络缓存位于客户端和 "源服务器 "之间&#xff0c;保存着所有可见内容的副本。当客户端请求缓存中存储的内容时&#xff0c;它可以直接从缓存中检索内容&#xff0c;而无需与服务器通信。这样&#xff0c;网络缓存就 "接近 "了客户端&a…

数据安全保障的具体措施有哪些

随着信息化时代的到来&#xff0c;数据已经成为企业和社会发展的重要资产。然而&#xff0c;数据安全问题也日益突出&#xff0c;如何保障数据的安全性、完整性和可用性成为了亟待解决的问题。以下将详细探讨数据安全保障的各个方面&#xff0c;以期为企业和社会提供更好的数据…

资深技术专家热议:下云风潮下企业该如何抉择?

引言 随着数字化的推进&#xff0c;很多企业都将上云作为数字化建设的重要指标&#xff0c;很多研究也表明上云可以帮助企业节约成本、提升效率。然而&#xff0c;近期下云风波似乎和云化的趋势唱了一个反调&#xff0c;我们应该如何理性看待下云潮&#xff1f;云计算的下一站将…

【计算机组成原理】期末复习试卷

目录 第一套试卷 第一套答案 第二套试卷 第二套答案 第三套试卷 第四套试卷 剩余试卷下载 第一套试卷 一、选择题&#xff08;共20分&#xff0c;每题1分&#xff09; 1&#xff0e;冯诺伊曼机工作方式的基本特点是______。 A&#xff0e;多指令流单数据流&#xff1b; B&#…