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

  • 个税年度汇算如何补税
  • 增值税专用发票几个点
  • 石油税费是多少
  • 个人能否申请延迟退休
  • 资产负债表应收账款等于什么
  • 小微企业减免附加税会计分录
  • 现金折扣的销售额
  • 出纳日常工作内容总结
  • 进项发票认证后暂不抵扣
  • 现金货款退回如何做会计分录呢?
  • 冲减利润怎么做账
  • 小规模企业所得税税率多少
  • 金税三期的变化
  • 贴现的利息能不能取出来
  • 销售返利如何做分录
  • 什么是劳动保护费支出
  • 增值税普通发票几个点
  • 小微企业如何备案
  • 城建税印花税教育附加税各是多少
  • 无偿赠送的原材料怎么处理
  • 腾讯电脑管家怎么修复dll
  • 鸿蒙系统如何截屏
  • Secure Boot什么意思?BIOS中Secure Boot灰色无法更改解决方法详解
  • 腾讯电脑管家中的软件市场打不开
  • 开办费 工资
  • 上月有留底税额,这个月有销销没有进项怎么做账
  • 闲置设备怎么处理
  • php常用的优化方式
  • win11键盘全部没反应
  • searchnavversion.exe - searchnavversion是什么进程 作用是什么
  • 银行收取对公账户服务费有什么用
  • 利用php实现开心麻花
  • 国家规定免税饲料具体哪些产品
  • golang、python、php、c++、c、java、Nodejs性能对比
  • 出口退税需要提供什么
  • python中的查找函数
  • string对象放在哪里
  • PHP HTTP 认证实例详解
  • 原始凭证必要时可以涂改
  • 土建工程怎么入账
  • 简易注销公示后怎么操作
  • 免税不可以开专票吗
  • 开发产品的成本
  • 无形资产收益额的具体测算方法有
  • 报销的注意事项
  • 公司纳税信用等级B级是什么意思
  • 填写企业所得税年度纳税申报表都需要哪些数据
  • 机器设备可以作为出资方式吗
  • 销售设备提供安装服务
  • 税务局的罚款记录怎么查
  • 外资企业可以融资吗
  • 商铺固定设施指哪些
  • 公司给员工租的房子计入什么科目
  • 以前年度损益调整
  • 开发间接费用怎么计算
  • 房地产企业如何结转成本
  • 免征增值税进项税怎么弄
  • 产成品入库的单据是什么
  • 取消windows开机登录密码
  • win10怎么关闭防火系统
  • linux targz
  • linux删除大量文件方法
  • linux的发展
  • centos5.10安装
  • xp硬盘安装win7系统教程
  • linux下scp远程拷贝包含空格的目录或者文件的解决方法
  • centos7 lvcreate
  • 让人吃惊的成语有哪些
  • wp8.1升级10
  • extjs form textfield的隐藏方法
  • js如何使用
  • js中事件的三要素
  • 一些实用性较高的东西
  • android实现推送
  • app启动页动画效果
  • JavaScript+html5 canvas制作色彩斑斓的正方形效果
  • Unity GameObject.activeSelf, GameObject.activeInHierarchy,GameObject.SetActive和SetActiveRecursively
  • 江西省电子信息职业学院
  • 纳税人欠缴税款数额在10万元以上
  • 开票时间超时怎么办
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设