组件的props属性

目录

1:使用props的作用:

2:props自定义属性的用法:

3:集合v-bind使用自定义属性:

4:props自定义属性是只读的:

5:default默认值:

6:type值类型:

7:required必填项校验:


1:使用props的作用:

props是组件的自定义属性,在封装通用组件的时候,合理使用props可以极大的提高组件的复用性!它的语法格式如下:

export default {//组件的自定义属性props:['自定义属性A','自定义属性B','其他自定义属性...'],//组件的私有数据data(){return {}}
}

2:props自定义属性的用法:

现在Left和Right两个组件都需要用到封装的组件Test,组件Test中的数据源中的数据默认是0,组件Left想要用到组件Test中的初始数据为10,组件Right中想要用到组件Test中的初始数据为100,这时可以在组件Test中自定义属性props,组件Left和Right通过组件Test中自定义属性的参数进行传值。如果很多地方都需要用到封装的特定组件可以将该组件进行全局注册方便使用。

3:结合v-bind使用自定义属性:

通过props这个属性进行传入的值默认是字符串,可以使用v-bind使其改变为数字,v-bind的简写形式: 

4:props自定义属性是只读的:

通过props传入的值只能用于读,不能进行写,如果进行操作传入的值写会报错。可以通过this.属性名将值赋给data区域中的其他属性。

5:default默认值:

如果不设置值可以设置default属性设置默认值

props的两种格式

props:[] 数组只能接收值

props:{}对象形式可以设置默认值

在声明自定义属性时,可以通过default来定义属性的默认值。示例代码:

 

6:type值类型:

规定接收值的类型,如果传入的值和规定的类型不匹配会报错

7:required必填项校验:

如果不进行传值报错提醒

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

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

相关文章

(Python) 特殊变量

整体 内置模块 name 用到的模块 对象 函数

掌握视频剪辑技巧:批量置入视频封面,提升视频品质

在当今数字化时代,视频已成为生活的重要组成部分。无论是观看电影、电视剧、综艺节目,还是分享个人生活、工作成果,视频都以其独特的魅力吸引着大众的视线。视频封面是视频内容的缩影,是观众对视频的第一印象。一个好的封面能吸引…

ArrayList 与 顺序表 (附洗牌算法)!

曾经我也是一枚学霸,直到有一天想去学渣的世界看看,结果就找不到回去的路了。 目录 1. 线性表 2.顺序表 2.1 接口的实现 3. ArrayList简介 4. ArrayList使用 4.1 ArrayList的构造 4.2 ArrayList常见操作 4.3 ArrayList的遍历 4.4 ArrayList的扩…

Flutter PK jetpack compose区别和选择

Flutter诞生于Chrome团队,是一帮做Web的开发做的跨平台框架,从最开始的设计初衷,就是指向了跨平台这条路,而Compose,则是诞生于Android团队,是为了解决当前View的架构体系不能再继续适应申明式编程的范式而…

使用drawio图表,在团队中,做计划,设计和跟踪项目

使用drawio图表,在团队中,做计划,设计和跟踪项目 drawio是一款强大的图表绘制软件,支持在线云端版本以及windows, macOS, linux安装版。 如果想在线直接使用,则直接输入网址draw.io或者使用drawon(桌案), drawon.cn内部…

Redis中分布式锁的使用

在分布式系统中,如果使用JVM中的同步锁在高并发的场景下仍然会产生线程安全问题。首先我们来查看在多个服务器时为什么会产生线程安全问题,有这样一个案例,有一件商品购买规则为一个用户只能购买一次,如果使用同步锁锁住用户id&am…

AR助推制造业智能转型:实时远程协作与可视化引领生产创新

制造商面临着多方面的变革,技术的兴起催生了工业物联网(IIoT),改变了现代工厂的外貌、系统和流程。同时,全球竞争压力和不断变化的员工队伍要求采用新的员工培训方法,并重新审视工人在工厂中的角色。尽管如…

Linux(13):例行性工作排程

例行性工程 听谓的排程是将工作安排执行的流程之意。 Linux 排程就是透过 crontab 与 at 这两个东西。 两种工作排程的方式: 一种是例行性的,就是每隔一定的周期要来办的事项; 一种是突发性的,就是这次做完以后就没有的那一种&a…

【算法】希尔排序

目录 1. 说明2. 举个例子3. java代码示例4. java示例截图 1. 说明 1.希尔排序是直接插入排序的一种改进,其本质是一种分组插入排序 2.希尔排序采取了分组排序的方式 3.把待排序的数据元素序列按一定间隔进行分组,然后对每个分组进行直接插入排序 4.随着间…

MySQL 8创建数据库、数据表、插入数据并且查询数据

我使用的数据库是MySQL 8。 创建数据库 create database Bookbought; -- 创建数据库Bookbought use Bookbought; -- 使用数据库Bookbought创建数据表 创建用户表bookuser。 create table ## 往allbook里边插入数据(id INT PRIMARY KEY AUTO_INCREMENT, -- id 为 主键userna…

CCKS2023-面向上市公司主营业务的实体链接评测-亚军方案

赛题分析 大赛地址 https://tianchi.aliyun.com/competition/entrance/532097/information 任务描述 本次任务主要针对上市公司的主营业务进行产品实体链接。需要获得主营业务中的产品实体,将该实体链接到产品数据库中的某一个标准产品实体。产品数据库将发布在竞赛…

机器学习决策树ID3算法

1、先去计算总的信息量 2、根据不同指标分别计算对应的信息增益 3、根据算出的信息增益来选择信息增益最大的作为根结点 4、天气中选择一个继续上述过程 5、决策树划分结束

MySQL索引优化实战二

分页查询优化 很多时候我们业务中实现分页功能时可能会用如下SQL来实现: select * from employees LIMIT 10000,10表示从表中中区从10001行开始的10行记录,看似只查了10条记录,但是这条SQL是先读取10010条记录,然后抛弃前10000条…

Spring事务管理介绍

文章目录 Spring事务管理1 Spring事务简介【重点】问题导入1.1 Spring事务作用1.2 需求和分析1.3 代码实现【前置工作】环境准备【第一步】在业务层接口上添加Spring事务管理【第二步】设置事务管理器(将事务管理器添加到IOC容器中)【第三步】开启注解式事务驱动【第四步】运行…

智能优化算法应用:基于黄金正弦算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用:基于黄金正弦算法无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用:基于黄金正弦算法无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.黄金正弦算法4.实验参数设定5.算法结果6.参考…

Nginx配置反向代理与负载均衡

Nginx配置反向代理与负载均衡 一、代理服务1.正向代理2.反向代理 二、实战场景-反向代理1.修改nginx配置 -> nginx.conf文件2.修改前端路径 三、实战场景-负载均衡1.热备2.轮询3.加权轮询4.ip_hash ​ Nginx (“engine x”) 是一个高性能的HTTP和反向代理服务器,…

10 分钟解释 StyleGAN

一、说明 G在过去的几年里,生成对抗网络一直是生成内容的首选机器学习技术。看似神奇地将随机输入转换为高度详细的输出,它们已在生成图像、生成音乐甚至生成药物方面找到了应用。 StyleGAN是一种真正推动 GAN 最先进技术向前发展的 GAN 类型。当Karras …

力扣题:字符串的反转-11.23

力扣题-11.23 [力扣刷题攻略] Re:从零开始的力扣刷题生活 力扣题1:557. 反转字符串中的单词 III 解题思想:先读取单词,然后将单词进行翻转即可 class Solution(object):def reverseWords(self, s):""":type s…

2024年AMC8美国初中数学竞赛最后一个月复习指南(附资料)

还有一个半月的时间,2024年AMC8(大家默认都直接叫这个比赛的英文名,而不叫中文名美国数学竞赛或美国初中数学竞赛了)就要开始了。 有志于在2024年AMC8的比赛中拿到奖项的孩子已经在“磨拳霍霍”了。那么最后一个半月的时间该如何…

LeetCode刷题---反转链表

个人主页:元清加油_【C】,【C语言】,【数据结构与算法】-CSDN博客 个人专栏:http://t.csdnimg.cn/ZxuNL http://t.csdnimg.cn/c9twt 前言:这个专栏主要讲述递归递归、搜索与回溯算法,所以下面题目主要也是这些算法做的 我讲述…