当前位置: 首页 > news >正文

Vue23-props配置功能

Vue2&3-props配置功能

Vue2-props配置

  • 功能:接收从其他组件传过来的数据,将数据从静态转为动态
  • 注意:
    • 同一层组件不能使用props,必须是父组件传子组件的形式。父组件传数据,子组件接收数据。
    • 不能什么数据都接收,可能会出现一些奇怪的bug
    • props接收过来的数据不要修改,页面渲染可能没有问题,但控制台会报错,而且不符合规范

在这里插入图片描述

props的三种接收方法:

  • 第一种:数组形式(常用)
props:['a', 'b']
  • 第二种:类型限制
props : { a : String b : Number 
}
  • 第三种:类型限制,必要性限制,默认值
props : { a : {// type:类型(可以是数字,字符串等)type : Number, // required:true 或者 false// 设置为true视为a必须存在(必填项),没有a则控制台报错// 默认情况为false required : true }, b : { type : Number, // default:默认值// 在添加默认值之前该字段接收的数据已经有数值时,则默认值无效default : 10 }
}

传数据的形式(传数据的形式可对应任意一种接受数据的方法):

  • 在标签内传数据
// 父组件
<Info name="张三" :age="12"></Info>// 子组件
props : ['name', 'age']
  • 在data(){}中传数据
// 父组件
<Info :list="list"></Info>
data() {return {list : [{id:'001', name:'zhangsan', age:'10'},{id:'002', name:'lisi', age:'20'}]}
}// 子组件
props : ['list']
  • 在methods : {}中传数据
// 父组件
<Info :list="list"></Info>
method : {list(){......}
}// 子组件
props : ['list']
  • 注:传数据的形式有很多,不局限以上用法,也可以在computed : {}中传数据等

怎么用?

  • 父组件传数据,子组件接收数据
// App.vue
<template><div><h1>{{msg}}</h1>// 当出现第二 或 第三种带有限定类型的props时,要注意接受的数据是否符合类型限制// 不符合类型限制,但又不想修改类型,例如:age="12",可采用v-bind:// v-bind:简写形式 => ':',等号后面可以是常量或字符串等<Info name="张三" :age="12"></Info></div>
</template><script>import Info from './components/Info.vue'export default {name : 'App',data() {return {msg : '个人信息'}},components : {Info}}
</script>
// Info.vue
<template><div><h3>姓名:{{name}}</h3><h3>年龄:{{age}}</h3></div>
</template><script>
export default {name : 'Info',data() {return {name: this.name}},// 数组形式(常用)props : ['name','age']// 带有类型限定props : { name : String age : Number }// 类型限制,必要性限制,默认值props : { name : {type : Number, required : true },age : { type : Number, default : 10 }}
}
</script>

Vue3-props配置

props的配置在Vue2和Vue3上基本相同,这里主要说明如何用setup调用props的接受数据
  • setup如何调用props?
    • 在setup函数中是没有this关键字的,所以在代用setup函数之前,会先给setup传递一个参数(props)
    • props参数在setup中被包装成一个代理对象,同样具有响应式处理能力
// App.vue
<template><User name="jack" :age="age"></User>
</template><script>import { ref } from 'vue'import Info from './components/Info.vue'export default {name : 'App',components : {Info},setup(){let age = ref(20)return{age}}}
</script>
// Info.vue
<template><h2>姓名:{{name}}</h2><h2>年龄:{{age}}</h2>
</template><script>export default {name : 'Info',// Vue3的props依旧是Vue2的接收方式,没变props : [name, age],// setup参数名可以随意,没要求setup(props){console.log(props.name);console.log(props.age);}}
</script>

相关文章:

Vue23-props配置功能

Vue2&3-props配置功能 Vue2-props配置 功能&#xff1a;接收从其他组件传过来的数据&#xff0c;将数据从静态转为动态注意&#xff1a; 同一层组件不能使用props&#xff0c;必须是父组件传子组件的形式。父组件传数据&#xff0c;子组件接收数据。不能什么数据都接收&a…...

怎样使用ovsyunlive在web网页上直接播放rtsp/rtmp视频

业务中需要在网页中直接播放rtsp和rtmp视频&#xff0c;多方比较测试发现ovsyunlive的播放器能直接播放rtsp/rtmp视频&#xff0c;还是非常方便简洁&#xff0c;使用过程如下&#xff1a; 1&#xff0c;Windows系统在github上面下载ovsyunlive绿色包下载解压。 github地址&am…...

MySQL | 查询接口性能调优、编码方式不一致导致索引失效

背景 最近业务反馈&#xff0c;列表查询速度过慢&#xff0c;需要优化。 到正式环境系统去验证&#xff0c;发现没筛选任何条件的情况下&#xff0c;查询需要三十多秒&#xff0c;而筛选了条件之后需要13秒。急需优化。 先说结论&#xff1a;连表用的字段编码方式不一致导致索…...

ASUS华硕灵耀X2 Duo UX481FA(FL,FZ)_UX4000F工厂模式原装出厂Windows10系统

下载链接&#xff1a;https://pan.baidu.com/s/1sRHKBOyc3zu1v0qw4dSASA?pwd7nb0 提取码&#xff1a;7nb0 带有ASUS RECOVERY恢复功能、自带所有驱动、出厂主题壁纸、系统属性专属LOGO标志、Office办公软件、MyASUS华硕电脑管家等预装程序所需要工具&#xff1a;16G或以上…...

企业安全—三保一评

0x00 前言 本篇主要是讲解三保一评的基础知识&#xff0c;以及对为什么要进行这些内容的原因进行总结。 0x01 整体 1.概述 三保分别是&#xff0c;分保&#xff0c;等保&#xff0c;关保。 分保就是指涉密信息系统的建设使用单位根据分级保护管理办法和有关标准&#xff0c…...

“深入理解机器学习性能评估指标:TP、TN、FP、FN、精确率、召回率、准确率、F1-score和mAP”

目录 引言 分类标准 示例&#xff1a;癌症检测 1. 精确率&#xff08;Precision&#xff09; 2. 召回率&#xff08;Recall&#xff09; 3. 准确率&#xff08;Accuracy&#xff09; 4. F1-score 5. mAP&#xff08;均值平均精度&#xff09; 总结与通俗解释 引言 机器…...

Linux软件包(源码包和二进制包)

Linux下的软件包众多&#xff0c;且几乎都是经 GPL 授权、免费开源&#xff08;无偿公开源代码&#xff09;的。这意味着如果你具备修改软件源代码的能力&#xff0c;只要你愿意&#xff0c;可以随意修改。 GPL&#xff0c;全称 General Public License&#xff0c;中文名称“通…...

Leetcode-394 字符串解码(不会,复习)

此题不会&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 题解思路&#xff1a;元组思想&#xff1a;数字[字符串]&#xff0c;每次遇到中括号意味着要重复数字次字符串…...

如何在Linux上搭建本地Docker Registry并实现远程连接

Linux 本地 Docker Registry本地镜像仓库远程连接 文章目录 Linux 本地 Docker Registry本地镜像仓库远程连接1. 部署Docker Registry2. 本地测试推送镜像3. Linux 安装cpolar4. 配置Docker Registry公网访问地址5. 公网远程推送Docker Registry6. 固定Docker Registry公网地址…...

assets_common.min.js

assets_common.min.js odoo将零散的js文件主要打包成了两个文件&#xff0c;分别是web.assets_common.min.js 和web.assets_backend.min.js&#xff0c; 我们分别看看这两个文件里都有些啥&#xff1f; common.js最先加载&#xff0c;看看里面都有些啥 1、boot.js 定义了od…...

前端工程化(vue2)

一、环境准备 1.依赖环境&#xff1a;NodeJS 官网&#xff1a;Node.js 2.脚手架&#xff1a;Vue-cli 参考网址&#xff1a;安装 | Vue CLI 介绍&#xff1a;Vue-cli用于快速的生成一个Vue的项目模板。主要功能有&#xff1a;统一的目录结构&#xff0c;本地调试&#xff0…...

深度学习(生成式模型)——Classifier Guidance Diffusion

文章目录 前言问题建模条件扩散模型的前向过程条件扩散模型的反向过程条件扩散模型的训练目标 前言 几乎所有的生成式模型&#xff0c;发展到后期都需要引入"控制"的概念&#xff0c;可控制的生成式模型才能更好应用于实际场景。本文将总结《Diffusion Models Beat …...

Hadoop架构、Hive相关知识点及Hive执行流程

Hadoop架构 Hadoop由三大部分组成:HDFS、MapReduce、yarn HDFS&#xff1a;负责数据的存储 其中包括&#xff1a; namenode&#xff1a;主节点&#xff0c;用来分配任务给从节点 secondarynamenode&#xff1a;副节点&#xff0c;辅助主节点 datanode&#xff1a;从节点&#x…...

P1529 [USACO2.4] 回家 Bessie Come Home 题解

文章目录 题目描述输入格式输出格式样例样例输入样例输出 提示完整代码 题目描述 现在是晚餐时间&#xff0c;而母牛们在外面分散的牧场中。 Farmer John 按响了电铃&#xff0c;所以她们开始向谷仓走去。 你的工作是要指出哪只母牛会最先到达谷仓&#xff08;在给出的测试数…...

Python语法基础(条件语句 循环语句 函数 切片及索引)

目录 条件语句关键字与C对照注意 循环语句while 循环语句while else 循环语句for 循环语句range() 函数 for else 循环语句循环控制语句练习&#xff1a;打印乘法表 函数函数定义及调用函数值传递和引用传递多返回值参数类型位置参数默认参数关键字参数可变数量的参数可变数量的…...

Debian 9 Stretch APT问题

Debian 9 Stretch APT问题 flyfish 操作系统 Debian 9 Stretch 错误提示 使用sudo apt update错误提示 Ign:1 http://mirrors.aliyun.com/debian stretch InRelease Ign:2 http://mirrors.aliyun.com/debian-security stretch/updates InRelease Ign:3 http://mirrors.al…...

遍历List集合和Map进行修改和删除报java.util.ConcurrentModificationException错误详解

一、异常产生 当我们使用foreach迭代一个ArrayList或者HashMap时&#xff0c;如果尝试对集合做一些修改操作&#xff08;例如删除元素或新增&#xff09;&#xff0c;可能会抛出java.util.ConcurrentModificationException的异常。 javapublic static void main(String[] args)…...

Android从一个APP跳转到另外一个APP

1、从当前APP去全新启动另外一个目标APP&#xff08;非覆盖同一个进程&#xff09;&#xff1a; 启动另外一个目标APP&#xff08;非覆盖原来APP的方式&#xff09; 1、当前APP加入获取权限声明&#xff1a;&#xff08;不加人权限检查&#xff0c;没法启动目标app&#xff0…...

我的创作纪念日——创作者2年

机缘 我最初使用CSDN估计是在2014年左右&#xff0c;当时还在读研&#xff0c;除了在当时比较有名的BBS例如小木虫上进行学术交流外&#xff0c;我发现很多问题百度后&#xff0c;都会转到CSDN&#xff0c;而且文章内容颇为专业&#xff0c;很多问题也都有专业的回答&#xff…...

大数据之LibrA数据库系统告警处理(ALM-12032 ommdba用户或密码即将过期)

告警解释 系统每天零点开始&#xff0c;每8小时检测当前系统中ommdba用户和密码是否过期&#xff0c;如果用户或密码即将在15天内过期&#xff0c;则发送告警。 当系统中ommdba用户过期的期限修改或密码重置&#xff0c;告警恢复。 告警属性 告警ID 告警级别 可自动清除 …...

地震勘探——干扰波识别、井中地震时距曲线特点

目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波&#xff1a;可以用来解决所提出的地质任务的波&#xff1b;干扰波&#xff1a;所有妨碍辨认、追踪有效波的其他波。 地震勘探中&#xff0c;有效波和干扰波是相对的。例如&#xff0c;在反射波…...

抖音增长新引擎:品融电商,一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

Java - Mysql数据类型对应

Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935&#xff0c;SRS管理页面端口是8080&#xff0c;可…...

Python爬虫(二):爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

Neo4j 集群管理:原理、技术与最佳实践深度解析

Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...