位置: 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 的报错问题(解决的英文)

  • 钉钉可以同时几个班一起上课吗

    钉钉可以同时几个班一起上课吗

  • word怎么把一列名字变成一行(word怎么把一列分成两列)

    word怎么把一列名字变成一行(word怎么把一列分成两列)

  • 苹果13怎么调亮度(苹果13怎么调亮度快捷键)

    苹果13怎么调亮度(苹果13怎么调亮度快捷键)

  • 苹果x人脸动画怎么开启(苹果x人脸动画怎么设置)

    苹果x人脸动画怎么开启(苹果x人脸动画怎么设置)

  • 红米note7连不上蓝牙耳机(红米note7连不上行车记录仪)

    红米note7连不上蓝牙耳机(红米note7连不上行车记录仪)

  • vivo微信深色模式怎么设置(vivo微信深色模式怎么关闭)

    vivo微信深色模式怎么设置(vivo微信深色模式怎么关闭)

  • 8p该不该升级ios12(8p该不该升级ios15)

    8p该不该升级ios12(8p该不该升级ios15)

  • 尺寸和像素是一样的吗(尺寸和像素什么关系)

    尺寸和像素是一样的吗(尺寸和像素什么关系)

  • 荣耀play4t上市时间(荣耀play4t首发价)

    荣耀play4t上市时间(荣耀play4t首发价)

  • se2电池容量多大(iphonese2电池容量多大)

    se2电池容量多大(iphonese2电池容量多大)

  • 上网方式cmnet是什么意思(cmwap上网是什么意思)

    上网方式cmnet是什么意思(cmwap上网是什么意思)

  • 钉钉视频会议呼叫受限怎么办(钉钉视频会议呼叫限制怎么解除)

    钉钉视频会议呼叫受限怎么办(钉钉视频会议呼叫限制怎么解除)

  • 中国电信属于什么单位(中国电信属于什么级别的央企)

    中国电信属于什么单位(中国电信属于什么级别的央企)

  • qq群举报成功封号几天(举报qq群显示账号已封停)

    qq群举报成功封号几天(举报qq群显示账号已封停)

  • 苹果x微信没有提示音怎么回事(苹果x微信没有声音怎么调)

    苹果x微信没有提示音怎么回事(苹果x微信没有声音怎么调)

  • 预留手机号不一致怎么办(预留手机号不一样可以绑支付宝吗)

    预留手机号不一致怎么办(预留手机号不一样可以绑支付宝吗)

  • 滴滴能开发票吗

    滴滴能开发票吗

  • 怎么开启微信视频美颜功能(怎么开启微信视频号的评论)

    怎么开启微信视频美颜功能(怎么开启微信视频号的评论)

  • vivo怎么看卸载软件记录(vivo怎么看卸载的软件怎么恢复)

    vivo怎么看卸载软件记录(vivo怎么看卸载的软件怎么恢复)

  • 苹果xsmax有指纹解锁吗(苹果14有没有指纹)

    苹果xsmax有指纹解锁吗(苹果14有没有指纹)

  • 简述三层交换机的作用(简述三层交换机的原理)

    简述三层交换机的作用(简述三层交换机的原理)

  • 手机sn码什么含义(请问手机的sn码是什么意思)

    手机sn码什么含义(请问手机的sn码是什么意思)

  • 快手pk受限多久能解(快手pk受限多久能恢复)

    快手pk受限多久能解(快手pk受限多久能恢复)

  • obs可以直播快手吗(obs怎么直播快手)

    obs可以直播快手吗(obs怎么直播快手)

  • mate20有没有熄屏时间

    mate20有没有熄屏时间

  • 苹果手机电池品牌(苹果手机电池品胜和飞毛腿哪个好)

    苹果手机电池品牌(苹果手机电池品胜和飞毛腿哪个好)

  • 抖音怎么看上热门了(抖音怎么看上热门了没有)

    抖音怎么看上热门了(抖音怎么看上热门了没有)

  • 帝国CMS自动截取简介怎么解决出现乱码的问题(帝国cms栏目自定义字段)

    帝国CMS自动截取简介怎么解决出现乱码的问题(帝国cms栏目自定义字段)

  • 注册公司不开账户可以吗
  • 增值税发票抵扣勾选平台
  • 企业里面不征税的发票能报销吗
  • 税务局季度报表怎么做
  • 交易性金融资产公允价值变动计入
  • 公共租赁住房折旧
  • 其他应付款款
  • 租入生物性资产如何入账
  • 小规模纳税人核定标准
  • 本月没有发生额本月合计
  • 转回已确认固定资产减值损失的会计处理怎么做?
  • 外地职工医保怎么报销
  • 固定资产的运费和关税计入什么费用
  • 单位发的奖金怎样交个税
  • 个体户生产所得税怎么计算
  • 短期借款利息的处理
  • 房子转租扣钱吗
  • 老板和公司账务处理流程
  • 如何一键重装系统win10
  • 境外所得抵扣税怎么申报
  • PHP:pg_convert()的用法_PostgreSQL函数
  • 无形资产的所得税处理是按100%还是75%
  • 坏账准备的相关账务处理
  • 售后租回融资租赁帐务处理怎么做?
  • 交完社保
  • 登记会计账簿的作用
  • Honeybee flying over crocuses in the Tatra Mountains, Poland (© Mirek Kijewski/Getty Images)
  • 前端的基础知识
  • vue初始化命令
  • Ubuntu18.04配置允许远程访问
  • php从服务器下载文件
  • 个人代人开普票要交几个点税
  • 营业执照上的注册资金可以改吗
  • 加计抵减四项服务是什么?
  • mysql无法连接到服务器
  • 金蝶软件怎么录入发票号
  • 固定资产对外投资
  • sql跨服务器查询语句
  • 现金流量表编制原则
  • 企业合并的账务处理
  • 职业年金是不是养老保险
  • 什么单位需要
  • 应交增值税减免税款是什么意思
  • 进货没开票销售开票了
  • 航信服务费减免怎么填
  • 政府给的专款专用的补贴需要交税吗
  • 中秋过节费会计分录
  • 其他应收款有没有备抵科目
  • 排污费主要用于哪些方面
  • 股东不能参与公司运营和决策,可以起诉吗
  • 跨年度固定资产转为在建工程怎么计算
  • 敬老院的会计科目
  • 建账的大体流程有哪些
  • 备查账簿有没有固定的格式
  • windows 进程管理
  • linux 维护命令
  • 教你彻底消灭牛身上的蜱虫
  • win7系统打不开网络和共享中心
  • dreamweaver是干嘛的
  • win7系统播放器在哪
  • win7桌面图标自动排列怎么取消
  • 提示无法启动打印作业
  • win10app商店
  • windows8快捷键
  • javascript运用
  • androidstudio更改工程名字
  • CocoStudio textfiled 文本点击区域按背景拉伸
  • jquery常用操作
  • nodejs与springboot结合
  • python socket编程教程
  • unity减少drawcall
  • bud3d跑酷
  • flex开发工具
  • python发邮件代码
  • 电子税务局获取验证码异常
  • 人事科负责人是否必须是党员?
  • 贵州网上税务局官网登录
  • 河北国家税务局官网站
  • 税务局 环保税
  • 国有土地使用权出让和转让条例
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设