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

  • 华为荣耀20和华为9x有啥区别(华为荣耀20和华为p30哪个好)

    华为荣耀20和华为9x有啥区别(华为荣耀20和华为p30哪个好)

  • 抖音登录不上怎么回事(抖音登录不上怎么解绑手机号)

    抖音登录不上怎么回事(抖音登录不上怎么解绑手机号)

  • 淘宝能保价服务吗(淘宝保价服务是从收货开始算吗)

    淘宝能保价服务吗(淘宝保价服务是从收货开始算吗)

  • 微信更改实名认证后果(微信更改实名认证后零钱还在吗)

    微信更改实名认证后果(微信更改实名认证后零钱还在吗)

  • 淘宝直播可以放录播吗(淘宝直播可以放其他店铺链接吗)

    淘宝直播可以放录播吗(淘宝直播可以放其他店铺链接吗)

  • 光纤线可以代替网线吗(光纤线可以代替电话线吗)

    光纤线可以代替网线吗(光纤线可以代替电话线吗)

  • 电子数字计算机工作最重要的特征是什么(电子数字计算机和电子模拟计算机的区别)

    电子数字计算机工作最重要的特征是什么(电子数字计算机和电子模拟计算机的区别)

  • hdmi接口可以外接什么设备(hdmi接口可以外接显示器吗)

    hdmi接口可以外接什么设备(hdmi接口可以外接显示器吗)

  • 华为手机怎么锁定后台(华为手机怎么锁微信)

    华为手机怎么锁定后台(华为手机怎么锁微信)

  • 表格的序号怎么在1开始(表格的序号怎么自动填充)

    表格的序号怎么在1开始(表格的序号怎么自动填充)

  • 抖音获赞怎么清零(抖音获赞怎么清除)

    抖音获赞怎么清零(抖音获赞怎么清除)

  • 苹果手机怎么删除云备份里面的内容(苹果手机怎么删除app和卸载app的区别)

    苹果手机怎么删除云备份里面的内容(苹果手机怎么删除app和卸载app的区别)

  • 小米下载的主题在哪个文件夹(小米下载的主题包为什么应用不了)

    小米下载的主题在哪个文件夹(小米下载的主题包为什么应用不了)

  • 安卓越用越卡怎么办(解决安卓手机越用越卡)

    安卓越用越卡怎么办(解决安卓手机越用越卡)

  • 华为荣耀9x摄像头怎么升降(华为荣耀9x摄像头)

    华为荣耀9x摄像头怎么升降(华为荣耀9x摄像头)

  • 为什么秀来电设置没有视频(为什么设置来电秀没有声音)

    为什么秀来电设置没有视频(为什么设置来电秀没有声音)

  • 苹果蓝牙耳机能定位吗(苹果蓝牙耳机能修吗)

    苹果蓝牙耳机能定位吗(苹果蓝牙耳机能修吗)

  • 苹果无线耳机双击设置(苹果无线耳机双耳模式)

    苹果无线耳机双击设置(苹果无线耳机双耳模式)

  • 蚂蚁森林芒种哪里来的(蚂蚁森林芒果树)

    蚂蚁森林芒种哪里来的(蚂蚁森林芒果树)

  • 闪送如何加入(闪送如何加入骑手)

    闪送如何加入(闪送如何加入骑手)

  • 【Node.js】初识Node.js(node.js deno)

    【Node.js】初识Node.js(node.js deno)

  • 手撕前端面试题【JavaScript】(前端手撕代码)

    手撕前端面试题【JavaScript】(前端手撕代码)

  • Java——多线程:Lamda表达式(java多线程经典案例)

    Java——多线程:Lamda表达式(java多线程经典案例)

  • 所得税费用调增分录
  • 劳务合同印花税税目
  • 收到发票未收到款
  • 已经作废的发票还需要申报吗
  • 什么情况下可以要求员工待岗
  • 高新技术企业费用认定
  • 集资款利息走什么科目
  • 对外销售的材料的成本应计入什么账户
  • 应付福利费余额在借方
  • 地产佣金收入属什么收入
  • 2021 上海房产税
  • 质押股票是否缴印花税
  • 税控设备实际抵减增值税时如何做分录?
  • 垃圾处理站利润
  • 其他应付款借贷方分别表示什么
  • 物业预收的物业费怎么做会计分录?
  • 微软雅黑字体一般用在哪里
  • 怎么写会计凭证
  • 外账的结转成本是什么
  • 如何解决windows7台试电脑蓝屏问题
  • 土地拍卖资金交到哪里
  • 怎么激活win10专业版
  • 我为什么要满足你的要求
  • 其他应付款期初余额在哪方
  • thinkphp分页传递参数
  • 错账是什么
  • echarts高德地图自定义区域
  • 差旅费的会计分录怎么做
  • 营业外支出准则
  • 优先股票与普通股票相比,其优先权主要指
  • 前端es6是什么意思
  • 车道线检测视频素材
  • 端午假期干什么
  • ls命令的作用
  • 境外公司委托境内公司付款
  • 收到多开发票的会计分录
  • mysql事务类型
  • 嵌入式软件行业在加计扣除的时候可以看作是制造业吗
  • 企业管理费会计怎么做账
  • 读取注册表失败,请检查注册表
  • 购买的金税盘可以抵扣吗
  • sqlsever注释符号
  • 积分获取和消费的关系
  • 一般纳税人销售自己使用过的汽车
  • 村委会靠什么赚钱
  • 其他综合收益转到留存收益
  • 管家婆软件如何做账?
  • 资本公积现金流量表里放在哪里
  • 认证失败,未获取到区域信息
  • 职工福利费的扣除标准工资总额包括什么
  • 库存商品结转成本需要附件吗
  • 会计中的一级科员是什么
  • 出口退税勾选后电子税务局查不到发票
  • 税控盘交服务费
  • 事业单位无形资产包括哪些
  • 业务提成怎么做账内账
  • 个体私营企业有哪些
  • switcher.exe - switcher是什么进程
  • linux系统怎样安装
  • Remind_XP.exe - Remind_XP是什么进程 有什么用
  • mom.exe是什么进程
  • Linux Shell 通配符、元字符、转义符使用实例介绍
  • windows8 defender
  • linux监控软件zabbix
  • win7小技巧
  • win7无法保存对权限所作的更改
  • linux安装xen
  • jquery jsonview
  • node.js deno
  • iframe transparent透明背景方法
  • javascript怎么设置字体大小
  • javascript怎么用
  • jquery实现自动轮播
  • js获取浏览器的cookie
  • 地税局属于哪个部门管
  • 国家税务总局23号文件
  • 国地税合并人员瘦身
  • 供热用地规划指标
  • 浪潮报销软件安装
  • 税务工作的前景怎么样
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设