props配置项

src/App.vue:

<template><div><Student name="JOJO" sex="男酮" :age="20" /></div>
</template><script>import Student from './components/Student.vue'export default {name:'App',components: { Student },}
</script>

src/components/Student.vue:

<template><div><h1>{{msg}}</h1><h2>学生姓名:{{name}}</h2><h2>学生性别:{{sex}}</h2><h2>学生年龄:{{age}}</h2>     </div>
</template><script>export default {name:'Student',data() {return {msg:"我是一名来自枝江大学的男酮,嘿嘿,我的金轮~~",}},// 简单声明接收// props:['name','age','sex']// 接收的同时对数据进行类型限制/* props:{name:String,age:Number,sex:String} */// 接收的同时对数据进行类型限制 + 指定默认值 + 限制必要性props:{name:{type:String,required:true,},age:{type:Number,default:99},sex:{type:String,required:true}}}
</script>

总结:

props配置项:

功能:让组件接收外部传过来的数据

传递数据:

接收数据:

第一种方式(只接收):props:[‘name’]

第二种方式(限制数据类型):props:{name:String}

第三种方式(限制类型、限制必要性、指定默认值):

props:{name:{type:String, //类型required:true, //必要性default:'JOJO' //默认值}
}

props是只读的,Vue底层会监测你对props的修改,如果进行了修改,就会发出警告,若业务需求确实需要修改,那么请复制props的内容到data中一份,然后去修改data中的数据

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

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

相关文章

绘制t-SNE图

什么是t-SNE图&#xff1f; 如下图&#xff0c;下图来源于论文Contrastive Clustering 一般用于分类问题/对比学习。 作用&#xff1f; 体现出经过层层训练&#xff0c;类内越来越紧密&#xff0c;类间差异越来越大&#xff1b;或者也可以做消融可视化。 怎么画&#xff1f…

vim操作手册

vim分为插入模式、命令模式、底行模式。 插入模式&#xff1a;编辑模式 命令模式&#xff1a;允许使用者通过命令&#xff0c;来进行文本的编辑控制 底行模式&#xff1a;用来进行让vim进行包括但不限于shell进行交互 w&#xff1a;保存 wq&am…

Actor-critic学习笔记-李宏毅

Policy Gradient review ∇ R ‾ θ 1 N ∑ n 1 N ∑ t 1 T n ( ∑ t ′ t T n γ t ′ − t r t ′ n − b ) ∇ log ⁡ p θ ( a t n ∣ s t n ) \nabla \overline{R}_\theta \frac{1}{N}\sum_{n 1}^{N}\sum_{t 1}^{T_n}(\sum_{tt}^{T_n}\gamma^{t-t}r_{t}^n-b)\nabl…

提高软件团队开发速度和质量的策略

在现代软件开发中&#xff0c;提高开发速度和质量是每个团队追求的目标。高效的开发流程不仅能缩短产品的上市时间&#xff0c;还能确保软件的稳定性和可靠性。本文将探讨提高软件团队开发速度和质量的各种策略&#xff0c;包括技术、流程、团队文化等方面。 一、采用敏捷开发…

SwiftUI中的Stepper(系统Stepper以及自定义Stepper)

本篇文章主要介绍一下Stepper&#xff0c;这个组件在UIKit中也已经有较长的历史了&#xff0c;下面看看在SwiftUI中如何使用&#xff0c;有哪些更加便捷的方法呢&#xff1f; Stepper减号(-)和加号()按钮&#xff0c;可以点击后以指定的数值进行加减。 基础初始化方法 Stepp…

【LinuxC语言】使用按位或操作传递多标志参数

文章目录 前言一、使用按位或操作传递多标志参数的原理二进制表示按位或操作检查标志图示二、C语言示例代码总结前言 在C语言编程中,经常需要在函数调用中传递多个选项或配置标志。直接传递多个参数可能会导致代码繁琐且难以维护。为了解决这个问题,C语言提供了一种通过按位…

【动态规划】斐波那契数列模型(C++)

目录 1137.第N个泰波那契数 解法&#xff08;动态规划&#xff09; 算法流程 1. 状态表⽰&#xff1a; 2. 状态转移⽅程&#xff1a; 3. 初始化&#xff1a; 4. 填表顺序&#xff1a; 5. 返回值&#xff1a; C算法代码 优化&#xff1a; 滚动数组 测试&#xff1a; …

HP Laptop 15s-fq2xxx,15s-fq2706TU原厂Win11系统镜像下载

惠普星15青春版原装Windows11系统&#xff0c;恢复出厂开箱状态oem预装系统&#xff0c;带恢复重置还原 链接&#xff1a;https://pan.baidu.com/s/1t4Pc-Q0obApLkG8o_9Kkkw?pwdduzj 提取码&#xff1a;duzj 适用型号&#xff1a;15s-fq2xxx&#xff0c;15s-fq2000 15s-f…

ROS2入门21讲__第19讲__Rviz:三维可视化显示平台

目录 前言 Rviz三维可视化平台 Rviz介绍 运行方法 彩色相机仿真与可视化 仿真插件配置 运行仿真环境 图像数据可视化 三维相机仿真与可视化 仿真插件配置 运行仿真环境 点云数据可视化 激光雷达仿真与可视化 仿真插件配置 运行仿真环境 点云数据可视化 Rviz v…

月薪5万是怎样谈的?

知识星球&#xff08;星球名&#xff1a;芯片制造与封测技术社区&#xff0c;星球号&#xff1a;63559049&#xff09;里的学员问&#xff1a;目前是晶圆厂的PE&#xff0c;但是想跳槽谈了几次薪水&#xff0c;都没法有大幅度的增长&#xff0c;该怎么办&#xff1f;“学得文武…

联想单机游戏联运SDK接入攻略

1. 接入流程 本文档主要介绍了联想单机游戏SDK接入流程、联想游戏提供的功能等。 1.1. 接入方式 1. 联想单机游戏SDK1.0版本支持“账号防沉迷”接入方式&#xff1b; a. 联想提供账号注册、登录等能力 b. 联想判断账号是否购买游戏&#xff0c;提供游戏支付购买能力 c. 联…

RobotFramework测试框架(13)--内置测试库

Builtln Evaluate方法 Evaluate。它可以做很多事情&#xff0c;主要的作用是可以直接调用Python的方法 一般用Evaluate都是前面放变量接收值&#xff0c;第三列是具体的运算表达式&#xff0c;第四列是要用到的Python的module。这里就是用random来进行一个随机数的生成 Cons…

基础6 探索JAVA图形编程桌面:集合组件详解

我们的团队历经了数不胜数的日夜&#xff0c;全力以赴地进行研发与精心调试&#xff0c;最终成功地推出了一款具有革命性意义的“图形化编程桌面”产品。这款产品的诞生&#xff0c;不仅极为彻底地打破了传统代码开发那长久以来的固有模式&#xff0c;更是把焦点聚集于解决长期…

Redis教程(十五):Redis的哨兵模式搭建

一、搭建Redis一主二从 分别复制三份Redis工作文件夹&#xff0c;里面内容一致 接着修改7002的配置文件&#xff0c;【redis.windows-service.conf】 port 7002 改成 port 7002 slaveof 127.0.0.1 7001 7003也同样修改 port 7003 slaveof 127.0.0.1 7001 这样就指定了700…

Android.mk简单介绍、规则与基本格式

文章目录 Android.mk与makefile区别Android.mk规则Android.mk基本格式 Android.mk与makefile区别 Android.mk 和 Makefile 都是用于构建代码项目的构建脚本文件&#xff0c;但是它们在特定上下文中有一些区别&#xff1a; Android.mk: Android.mk 是用于构建 Android 应用或库…

浅析FAT32文件系统

本文通过实验测试了FAT文件系统的存储规律&#xff0c;并且探究了部分可能的文件隐藏方法。 实验背景 现有一块硬盘&#xff08;U盘&#xff09;&#xff0c;其中存在两个分区&#xff0c;分别为FAT32和NTFS文件系统分区。 在FAT分区中存在如下文件&#xff1a; 现需要阅读底…

聚合函数AVG/SUM/MAX/MIN/COUNT/COUNT(*)例子

当然&#xff0c;我可以为你提供SQL中聚合函数AVG、SUM、MAX、MIN、COUNT和COUNT(*)的例子。这些函数通常用于SELECT语句中&#xff0c;与GROUP BY子句一起使用来对数据进行分组和聚合。 以下是一些示例&#xff1a; AVG&#xff08;平均值&#xff09; 假设我们有一个名为s…

决策控制类软件项目的团队配置

决策控制类软件项目的团队配置怎样才是最合适的&#xff1f;目的就是实现高效的项目协作以及为企业降本增效。软件项目的主要费用来源是研发人员的开支以及差旅费用。 下面的思维导图从项目与产品的关系、团队架构、项目成员配置、项目可复制性、招聘这几点进行说明如何组织人…

抖音分享链接视频下载

import requests import re from urllib.parse import unquote import json from pprint import pprint from selenium import webdriver from selenium.webdriver.chrome.options import Options import os def get_video_id(url): # 创建一个Chrome WebDriver实例 ch…

六招搞定,SPA单页面加载速度慢的问题。

众所周知&#xff0c;SPA页面有很多优点&#xff0c;但是首屏加载慢的问题一直被诟病&#xff0c;本文介绍几种解决策略&#xff0c;希望对老铁们有所帮助。 一、SPA页面的独有优势 1. 更快的用户体验&#xff1a; SPA在加载初始页面后&#xff0c;可以在用户与应用程序交互…