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

  • oppok9s怎么录屏(oppok9录屏怎么录声音)

    oppok9s怎么录屏(oppok9录屏怎么录声音)

  • 微信扫描身份证扫不上(微信扫描身份证怎么扫描)

    微信扫描身份证扫不上(微信扫描身份证怎么扫描)

  • 华为p40pro可以给别的手机充电吗(华为p40pro可以给公交卡充值吗)

    华为p40pro可以给别的手机充电吗(华为p40pro可以给公交卡充值吗)

  • 剪映怎么倒放(剪映怎么倒放一个画面)

    剪映怎么倒放(剪映怎么倒放一个画面)

  • 微星主板启动快捷键(微星主板启动快捷)

    微星主板启动快捷键(微星主板启动快捷)

  • 充电宝充到80就不进电(充电宝充到80就不充了)

    充电宝充到80就不进电(充电宝充到80就不充了)

  • 港服nat是什么意思(港服m和港服t)

    港服nat是什么意思(港服m和港服t)

  • 腾讯课堂放视频没声音(腾讯课堂放视频声音很小)

    腾讯课堂放视频没声音(腾讯课堂放视频声音很小)

  • 腾讯会议可以两台设备同时登录吗(腾讯会议可以两天用同一个会议号吗)

    腾讯会议可以两台设备同时登录吗(腾讯会议可以两天用同一个会议号吗)

  • 华为触控点怎么关闭(华为触控怎么取消)

    华为触控点怎么关闭(华为触控怎么取消)

  • 手机有重影是怎么回事(手机重影是怎么回事vivo)

    手机有重影是怎么回事(手机重影是怎么回事vivo)

  • iphone11为什么充不进去电(iPhone11为什么充到80就不动了)

    iphone11为什么充不进去电(iPhone11为什么充到80就不动了)

  • Excel可以按几个关键字排序(在excel中最多可以按几个关键字)

    Excel可以按几个关键字排序(在excel中最多可以按几个关键字)

  • 电话响一声就在通话中怎么回事

    电话响一声就在通话中怎么回事

  • 手机银行怎么存定期(手机银行怎么存钱有利息)

    手机银行怎么存定期(手机银行怎么存钱有利息)

  • 华为手机怎么显示后台(华为手机怎么显示返回键)

    华为手机怎么显示后台(华为手机怎么显示返回键)

  • 台式电脑怎么连蓝牙(台式电脑怎么连接蓝牙音响设备)

    台式电脑怎么连蓝牙(台式电脑怎么连接蓝牙音响设备)

  • x27升降摄像头寿命(x27pro升降摄像头)

    x27升降摄像头寿命(x27pro升降摄像头)

  • 余额宝怎么提现到银行卡(拼多多余额宝怎么提现)

    余额宝怎么提现到银行卡(拼多多余额宝怎么提现)

  • 探探真实头像认证要多久(探探真实头像认证)

    探探真实头像认证要多久(探探真实头像认证)

  • 为什么oppo手机玩游戏不能听歌(为什么oppo手机打不开)

    为什么oppo手机玩游戏不能听歌(为什么oppo手机打不开)

  • 全民k歌怎么关闭评分(全民k歌怎么关闭原唱)

    全民k歌怎么关闭评分(全民k歌怎么关闭原唱)

  • 三星手机如何截图(三星手机如何截图手机屏幕)

    三星手机如何截图(三星手机如何截图手机屏幕)

  • 液晶显示器容易出现故障的部件(液晶显示器容易坏点)

    液晶显示器容易出现故障的部件(液晶显示器容易坏点)

  • 个人所得税可以不交税吗
  • 不缴或少缴应纳税款的处罚措施
  • 应交消费税的税目
  • 财税大管家客服电话
  • 幼儿园财务科目设置
  • 公允价值变动损益属于什么科目
  • 不知道进价怎么求利润
  • 印花税应计入什么账户
  • 个税申报怎样作废
  • 没有收入也可以信用贷
  • 过路费纸质发票怎么生成电子发票
  • 电子承兑到期怎么操作流程
  • 长期借款利息计入应付利息吗
  • 本期进项税大于销项税
  • 财务软件计提所得税分录
  • 个税的滞纳金怎么算
  • 公司买手机可以开票抵扣吗
  • 运输行业税负率一般控制在多少?
  • 技术开发费加计扣除优惠政策
  • 金税控系统发票打印设置
  • 财税政策是什么
  • 增值税缴纳计入成本吗
  • 复合增长率什么函数
  • 参加失业保险本期实际缴费金额包括员工承担部分吗?
  • 企业变更股东要交税吗
  • 收到保险公司车辆保险发票会计分录
  • 差额发票可以开1个点吗?
  • 房屋租赁进项税
  • 不征税收入符合的条件
  • linux1970
  • 税收返还会计核算
  • LangChain与大型语言模型(LLMs)应用基础教程:信息抽取
  • 委托加工物资如何做账
  • 网络课平台用交税吗
  • 会计计入其他业务收入的有哪些
  • db2之间的数据库迁移
  • 固定资产投资子公司
  • 出差自己开车去开会怎么报销交通费
  • 非财政补助结余分配属于什么科目
  • 签发转账支票需要的单据
  • 经审计的财务报表是否要会计师事务所盖章
  • 如何恢复sql server误删除的数据库
  • 差旅费报销时如何处理
  • 基本户变更经营范围需要什么材料
  • 子公司注销合并报表少数股东权益的处理
  • 使用积分换取物的软件
  • 商贸企业 税收 政策规定
  • 对外支付3万美元怎么算
  • 合伙企业有限合伙
  • 强制执行的款在执行局领取吗
  • 预付账款跨年处理分录
  • 仓储费用分配率
  • 预付卡开不征税发票
  • 企业印花税率
  • 接受政府补助的应纳税所得
  • 应付职工薪酬包括福利费吗
  • 个人向公司账户存现金
  • 周转金怎么计算
  • window打开注册表
  • windowsxp打开注册表
  • ubuntu下的vivado2022怎么打开
  • 如何限制网速不让孩子玩游戏
  • 2021年win10累积更新
  • win1020h2累积更新
  • windows无法预览文件
  • 用VMware安装阿里linux
  • linux批量ping
  • js的三种循环
  • vue自定义过滤器的语法
  • unity 案例
  • 前端自动化开发软件
  • android使用so
  • 用python定义一个函数
  • python中lxml模块
  • 浅析2种JavaScript继承方式
  • 不动产租赁和经营租赁发票的区别
  • 车船税单独交行吗
  • 南通工伤网上申请流程
  • 小微企业怎么报增值税
  • 怎样以实际行动争取入团
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设