位置: IT常识 - 正文

vue3 props属性基本使用梳理(vue3中props)

编辑:rootadmin
vue3 props属性基本使用梳理 前言

推荐整理分享vue3 props属性基本使用梳理(vue3中props),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue property属性,vue的props属性,vue中props值怎么在方法中使用,vue3中props,vue property属性,vue3中props,vue的props属性,vue3中props,内容如对您有帮助,希望把文章链接给更多的朋友!

vue2中props属性的使用是比较统一的基本就一种方式,但是vue3中其实方式是比较多的,因此就打算梳理一下。 会按照选项式和组合式进行梳理,包括属性的定义、取值以及属性的监听。

应该是叫单文件组件和组合式API,不知道vue官方是根据什么区分的。

单文件组件定义

这里大体上分为两大类进行说明,这两大类都需要使用defineProps来进行定义

非ts语法const props = defineProps({ // 基础类型检查 // (给出 `null` 和 `undefined` 值则会跳过任何类型检查) propA: Number, // 多种可能的类型 propB: [String, Number], // 必传,且为 String 类型 propC: { type: String, required: true }, // Number 类型的默认值 propD: { type: Number, default: 100 }, // 对象类型的默认值 propE: { type: Object, // 对象或数组的默认值 // 必须从一个工厂函数返回。 // 该函数接收组件所接收到的原始 prop 作为参数。 default(rawProps) { return { message: 'hello' } } }, // 自定义类型校验函数 propF: { validator(value) { // The value must match one of these strings return ['success', 'warning', 'danger'].includes(value) } }, // 函数类型的默认值 propG: { type: Function, // 不像对象或数组的默认,这不是一个工厂函数。这会是一个用来作为默认值的函数 default() { return 'Default function' } }})

这种方式还是比较简单的,基本和vue2没有太大的区别。

ts语法interface ganttChartItem { // 宽度 width: number, // 颜色 color: string}interface Props { // id id:string // 宽度 width: number, // 高度 height?: number, // 是否初始化 init?: boolean, // 子项 list?: Array<ganttChartItem>, // 是否显示描述 desc?:string // 描述颜色 descColor?:string}const props = withDefaults(defineProps<Props>(), { // 高度默认20 height: 20, // 默认初始化 init: true, // 子项默认为空 list: () => [], // 是否显示描述 desc: '', // 描述颜色 descColor: ''});vue3 props属性基本使用梳理(vue3中props)

特殊点:

泛型,可以通过定义interface接口来规范props的属性的格式。不像vue2中定义一个对象类型的属性,这个对象中可以有各种各样的子属性。?: 表示可选属性,:表示必填属性定义默认属性值时需要使用withDefaults取值

取值时可以当成一个普通的对象,例如:

props.desc监听watch( () => props.visible, (val) => { open.value = val; console.log(val); });demo<a-b v-model:visible="show" />//ab.vue<template> <div class="container"> <el-dialog v-model="open" title="Tips" width="30%"> <span>This is a message</span> </el-dialog> </div></template><script setup lang="ts">import { watch, ref } from 'vue';const props = defineProps({ visible: { type: Boolean, default: false }});const open = ref(false);watch( () => props.visible, (val) => { open.value = val; console.log(val); });</script>

这里有个问题,虽然弹窗绑定的值可以直接是属性,但是好像不推荐这样使用

组合式

感觉setup语法糖模式用的更多一点(可能是我们公司用的比较多)。好久没这样用了,差点忘记怎么写了😀

定义

这个没什么说的,跟vue2一样

props: { visible: { type: Boolean, default: false } },使用

使用时需要通过setup函数传参的方式来取值。

setup(props) { return { props }; }监听 watch( () => props.visible, (val) => { open.value = val; console.log(val); } );demo<template> <div> <el-dialog v-model="open" title="Tips" width="30%"> <span>This is a message</span> </el-dialog> </div></template><script lang="ts">import { defineComponent, watch, ref } from 'vue';export default defineComponent({ props: { visible: { type: Boolean, default: false } }, setup(props) { const open = ref(false); watch( () => props.visible, (val) => { open.value = val; console.log(val); } ); return { open }; }});</script>补充

其实没必要非要用props属性,props属性应该在该用的时候用。

可以看一下我的这篇文章:vue3:使用ref和emit来减少props的使用

本文链接地址:https://www.jiuchutong.com/zhishi/290791.html 转载请保留说明!

上一篇:南奥索峰的Lac d'Ayous小屋,法国 (© Eneko Aldaz/Offset by Shutterstock)

下一篇:解决:code ERESOLVE:ERESOLVE could not resolve 的报错问题(解决的英文)

  • 纵观2017互联网新趋势,手把手解析邮件营销新玩法 !(互联网2018)

    纵观2017互联网新趋势,手把手解析邮件营销新玩法 !(互联网2018)

  • 向日葵远程控制主机系统账户名是什么(向日葵远程控制官方下载)

    向日葵远程控制主机系统账户名是什么(向日葵远程控制官方下载)

  • 错误代码503(错误代码50382-mw1)

    错误代码503(错误代码50382-mw1)

  • 手机屏幕怎么拆下来(手机屏幕怎么拆下来视频)

    手机屏幕怎么拆下来(手机屏幕怎么拆下来视频)

  • 淘宝618活动怎么参加(淘宝618活动怎么买划算)

    淘宝618活动怎么参加(淘宝618活动怎么买划算)

  • 抖音怎么看不到音浪(抖音怎么看不到对方的作品)

    抖音怎么看不到音浪(抖音怎么看不到对方的作品)

  • 第二代计算机用什么作为外存储器(第二代计算机用磁盘和什么作为外存储器)

    第二代计算机用什么作为外存储器(第二代计算机用磁盘和什么作为外存储器)

  • 美版有锁是什么意思(美版有锁是什么型号)

    美版有锁是什么意思(美版有锁是什么型号)

  • 传输速率为9600bps意味着每分钟最多可传送(传输速率为9600b的二进制数码流)

    传输速率为9600bps意味着每分钟最多可传送(传输速率为9600b的二进制数码流)

  • 怎么在抖音里添加自己喜欢的配音(怎么在抖音里添加自己的配音)

    怎么在抖音里添加自己喜欢的配音(怎么在抖音里添加自己的配音)

  • 芒果tv清晰度在哪里调(芒果tv清晰度在哪里)

    芒果tv清晰度在哪里调(芒果tv清晰度在哪里)

  • 国产操作系统能不能安装到目前的电脑(国产操作系统能打败微软吗)

    国产操作系统能不能安装到目前的电脑(国产操作系统能打败微软吗)

  • 微信可以横屏吗(微信可以横着吗)

    微信可以横屏吗(微信可以横着吗)

  • 8p充电慢是怎么回事(8p充电速度突然变慢了)

    8p充电慢是怎么回事(8p充电速度突然变慢了)

  • 数据库阶段的数据管理特点(数据库阶段的数据结构是)

    数据库阶段的数据管理特点(数据库阶段的数据结构是)

  • 华为手机点哪里都有语音说话怎么关掉(华为手机点哪里都有语音提示)

    华为手机点哪里都有语音说话怎么关掉(华为手机点哪里都有语音提示)

  • 电子计算器上ce是什么键(电子计算器上ce键的主要功能是关机对不对)

    电子计算器上ce是什么键(电子计算器上ce键的主要功能是关机对不对)

  • 华为荣耀9x人脸识别在哪里设置(华为荣耀9x人脸解锁)

    华为荣耀9x人脸识别在哪里设置(华为荣耀9x人脸解锁)

  • 有什么征婚网站(有哪些征婚网)

    有什么征婚网站(有哪些征婚网)

  • word的页面设置在哪里(word的页面设置中能够设置页边距纸张类型)

    word的页面设置在哪里(word的页面设置中能够设置页边距纸张类型)

  • 采用虚拟存储器的目的(采用虚拟存储器的主要目的是什么)

    采用虚拟存储器的目的(采用虚拟存储器的主要目的是什么)

  • websoc什么意思(web是什么意思)

    websoc什么意思(web是什么意思)

  • 鸿蒙系统如何删除空白桌面?鸿蒙系统删除多余桌面的方法(鸿蒙系统如何删除桌面图标)

    鸿蒙系统如何删除空白桌面?鸿蒙系统删除多余桌面的方法(鸿蒙系统如何删除桌面图标)

  • u盘一键启动bios设置的图文教程(u盘一键启动安装系统)

    u盘一键启动bios设置的图文教程(u盘一键启动安装系统)

  • 一般纳税人增值税申报操作流程
  • 城市维护建设税计算公式
  • 公益性捐赠税前扣除资格有效期
  • 进项税跟增值税
  • 小规模销售收入免税会计分录
  • 减值准备为什么影响利润总额
  • 车辆日常维护费用
  • 资产负债表存货怎么填列
  • 计提持有至到期投资减值准备
  • 货币资金包括应收票据和应收账款吗
  • 公司持有的房产税
  • 个人出租住房如何开票
  • 地税按季报还是月报
  • 不动产有法律效力吗
  • 企业不能抵扣的专票有哪些
  • 个人房源出租
  • 医院会计制度准则
  • 固定资产残值清零怎么处理
  • 安全生产费用怎么支出
  • 猫光纤信号灯闪红
  • mac本host文件
  • kb4507449安装失败
  • 事业单位专项经费包括哪些
  • PHP:curl_pause()的用法_cURL函数
  • 家用电脑分为哪几类
  • 台式机用win7
  • 没有收入的情况下可以填成本吗
  • 苏格兰高地什么意思
  • typescript和javascript那个更高级
  • vue 状态管理
  • golang 和 java
  • php远程访问
  • 命令行延时
  • php smtp发送邮件
  • 企业初期面临的主要问题
  • 计提工资薪金
  • 企业转让无形资产取得的收益应计入营业外收入
  • 帝国主义
  • 织梦使用教程
  • centos离线安装mondo
  • 差旅费报销金额大于实际发生金额
  • 租金收入如何确认收入
  • 建筑工程机械费用标准
  • 建信融通e信通怎样转让
  • 哪些支出可以在出国公杂费中扣除
  • 网络服务费怎么入账
  • 个体工商户税收新政策
  • 事业单位如何计算退休工资
  • 航空电子客票行程单怎么打印
  • 股权转让的实质
  • 零余额账户怎么对账
  • 发票代码和发票号码是唯一的吗
  • 工人的工资占企业的比例
  • 登记总分类账的依据有
  • 固定资产管理台账管理制度
  • 怎么建立起来的
  • 商业企业注销应检查哪方面的问题
  • sql中去掉结果为零的
  • mysql column is ambiguous
  • 老生常谈啥意思
  • 如何使用mac book
  • 运行方式包括什么方式
  • win8自启动
  • win10笔记本键盘失灵按什么键恢复
  • opengl programming guide
  • 深入解析抑郁症:什么是它的表现?别小看它的危害程度!
  • 如何从0开始赚钱
  • python 单例
  • cocos2d教程
  • Android异常重启保护机制
  • unity smooth
  • angular 图片懒加载
  • 在js里写html
  • fiori开发工具
  • android的数据储存方式
  • android布局背景颜色的代码
  • 简单的智能家居
  • 为什么需要报税
  • 公司0申报怎么申报视频
  • 地税怎么查个人所得税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设