【超细节】Vue3的属性传递——Props

news2024/11/25 10:10:50

目录

前言

一、定义

二、使用

1. 在 setup 中(推荐)

2. 非 setup 中

3. 对象写法的校验类型

4. 使用ts进行类型约束

5. 使用ts时props的默认值

三、注意事项

1. Prop 名字格式

2. 对象或数组类型的默认值

3. Boolean 类型转换


前言

Vue3相较于Vue2,Props传递的变化很大,并且结合ts后,写法有些怪异(choulou)。还有一些小细节,特此梳理一下。

一、定义

Vue3里组件之间属性传值需要显式声明它所接受的 props,这样 Vue 才能知道外部传入的哪些是 props,哪些是透传 attribute 。(关于透传attribute($attrs)在上文已讲,传送:Vue3中的透传Attributes / $attrs:简化组件开发的利器)

在Vue2中,可以简单的用数组或者对象的写法写出来就行,如下:

// 写法一
export default {
  props: ['test'],
  created() {
    // props 会暴露到 `this` 上
    console.log(this.test)
  }
}

// 写法二
export default {
  props: {
    title: String,
    likes: Number
  }
}

但在Vue3中,就要区分是否使用 <script setup> 语法糖写法,还有是否使用ts。

二、使用

1. setup 中(推荐)

注意:Vue3中只要是define开头的api,不需要从vue中引入。

<script setup>
// 数组写法
const props = defineProps(['test'])
console.log(props.tset)

// 对象写法并校验
defineProps({
  title: String,
  likes: Number
})
</script>

2. 非 setup 中

和Vue2保持一致

// 数组写法
export default {
  props: ['test'],
  setup(props) {
    // setup() 接收 props 作为第一个参数
    console.log(props.test)
  }
}

// 对象写法
export default {
  props: {
    title: String,
    likes: Number
  }
}

3. 对象写法的校验类型

 (来自Vue官网)

4. 使用ts进行类型约束

这个时候的写法可能就很不习惯了。

<script setup lang="ts">
defineProps<{
  title?: string
  likes?: number
}>()
</script>

拆分开来,其实等价于:

<script setup lang="ts">
interface Props {
  title?: string
  likes?: number
}

const props = defineProps<Props>()
</script>

5. 使用ts时props的默认值

当使用基于类型的声明时,我们失去了为 props 声明默认值的能力。

如果是对象写法,可以约定默认值,但是使用刚才第4点的ts进行类型约束后,就做不到了。这个时候可以通过 withDefaults 来解决:

export interface Props {
  msg?: string
  labels?: string[]
}

const props = withDefaults(defineProps<Props>(), {
  msg: 'hello',
  labels: () => ['one', 'two']
})

相当于是将整个之前的defineProps作为参数传给了withDefaults。

三、注意事项

1. Prop 名字格式

如果一个 prop 的名字很长,应使用 camelCase 形式,因为它们是合法的 JavaScript 标识符,可以直接在模板的表达式中使用.

<script>
    defineProps({
      greetingMessage: String
    })
</script>

<template>
    <span>{{ greetingMessage }}</span>
</template>

2. 对象或数组类型的默认值

当使用对象写法来进行对props进行约束时,对象或数组类型是最特殊的,它们的默认值必须从一个工厂函数 defult 返回:

defineProps({
  // 对象类型的默认值
  propAOrO: {
    type: Object,
    // 工厂函数写法
    default(rawProps) {
      return { message: 'hello' }
    }
  },

})

3. Boolean 类型转换

为了更贴近原生 boolean attributes 的行为,声明为 Boolean 类型的 props 有特别的类型转换规则。

这个规则就像原生的带Boolean 类型的html标签,例如input标签type为radio的单选框标签。其中如果属性添加上disabled,表示该单选框被禁用,无法进行选择。就等同于input里面对于disable属性默认为是true。

同理,当给组件声明为 Boolean 类型的 props ,也是这种规则。例如:

defineProps({
  ischecked: Boolean
})

那这个组件也可以直接这么使用:

<!-- 等同于传入 :ischecked="true" -->
<SonCom ischecked />

<!-- 等同于传入 :ischecked="false" -->
<SonCom />

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/835186.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

代码签名证书是什么?

代码签名证书是什么&#xff1f;有什么作用&#xff1f;代码签名证书是提供软件开发者可以进行代码软件数字签名的认证服务。通过对代码的数字签名可以消除软件在Windows系统被下载安装时弹出的“不明开发商”安全警告&#xff0c;保证代码完整性和不被恶意篡改&#xff0c;使软…

【严重】泛微 e-cology <10.58.3 任意文件上传漏洞

漏洞描述 泛微协同管理应用平台(e-cology)是一套企业大型协同管理平台。 泛微 e-cology 10.58.3之前版本存在任意文件上传漏洞&#xff0c;由于上传接口身份认证缺失&#xff0c;未经过身份验证的攻击者可以构造恶意请求将文件上传至服务器&#xff0c;攻击者可能通过上传jsp…

Python web实战之 Django 的模板语言详解

关键词&#xff1a; Python、web开发、Django、模板语言 概要 作为 Python Web 开发的框架之一&#xff0c;Django 提供了一套完整的 MVC 模式&#xff0c;其中的模板语言为开发者提供了强大的渲染和控制前端的能力。本文介绍 Django 的模板语言。 1. Django 模板语言入门 Dj…

神策新一代分析引擎架构演进

近日&#xff0c;神策数据已经推出全新的神策分析 2.5 版本&#xff0c;该版本支持分析模型与外部数据的融合性接入&#xff0c;构建全域数据融合模型&#xff0c;实现从用户到经营的全链路、全场景分析。新版本的神策分析能够为企业提供更全面、更有效的市场信息和经营策略&am…

《向量数据库指南》——腾讯云向量数据库Tencent Cloud VectorDB产品规格

目录 节点类型 节点数量 节点规格 腾讯云向量数据库(Tencent Cloud VectorDB)采用分布式部署架构,每个节点相互通信和协调,实现数据存储与检索。客户端请求通过 Load balance 分发到各节点上。具体信息,请参见 产品架构。 节点类型 腾讯云向量数据库依据存储节点 CPU …

A02_启动测速和切换站点

一 业务功能 二 问题 三 业务流程 1 初始化网络 2 测速选站点 3 拉取站点 4 手动切换站点 四 重点代码 public class StationMeasure {private static final String TEST_STATION_URL "/test/ips";private static final String STATION_URL "/product/ips&…

鸟哥马哥共叙Linux发展

导读北京时间3月28日&#xff0c;由51CTO学院和人民邮电出版社信息技术分社联合举办的[开放见远]“鸟哥”大陆行Linux技术沙龙在位于北京市西三环久凌大厦的51CTO学院举行。 台湾著名Linux网站——“鸟哥的Linux私房菜”站长蔡德明&#xff0c;51CTO学院讲师马哥教育创始人马永…

EasyRecovery15简体中文个人版专业手机数据恢复软件

EasyRecovery15数据恢复软件是一款文件恢复软件&#xff0c;能够恢复内容类型非常多&#xff0c;包括办公文档、文件夹、电子邮件、照片、音频等一些常用文件类型都是可以进行恢复&#xff0c;操作非常简单&#xff0c;只需要将存储设备连接到电脑上&#xff0c;运行EasyRecove…

异常(上)概述,捕捉异常,try-catch语句的详细使用

文章目录 前言一、异常是什么&#xff1f;二、捕捉异常 1.自动捕捉异常2.try-catch语句捕捉异常 a.多重try-catch代码块b.异常的中断机制c.finally代码块恢复机制总结 前言 该文介绍了Java异常的概述&#xff0c;运行代码时&#xff0c;异常的捕捉&#xff0c;及其使用 try-cat…

QT图形视图系统 - 使用一个项目来学习QT的图形视图框架 - 始篇

文章目录 QT图形视图系统介绍开始搭建MainWindow框架设置scene的属性缩放功能的添加加上标尺 QT图形视图系统 介绍 详细的介绍可以看QT的官方助手&#xff0c;那里面介绍的详细且明白&#xff0c;需要一定的英语基础&#xff0c;我这里直接使用一个开源项目来介绍QGraphicsVi…

leetcode 738. 单调递增的数字

2023.8.4 这题用暴力法会超时&#xff0c;我就没试了&#xff0c;采用了个挺巧的方法&#xff0c;为了方便需要先将整数n转换为字符串的形式&#xff0c;然后从后向前遍历&#xff0c;当两个数字非递增时&#xff0c;将前一个数字--&#xff0c;后一个数字的位置记录在index中&…

路由的hash和history模式的区别

目录 ✅ 路由模式概述 一. 路由的hash和history模式的区别 1. hash模式 2. history模式 3. 两种模式对比 二. 如何获取页面的hash变化 ✅ 路由模式概述 单页应用是在移动互联时代诞生的&#xff0c;它的目标是不刷新整体页面&#xff0c;通过地址栏中的变化来决定内容区…

Three.js 创建网格辅助线,坐标轴辅助线,模型骨骼辅助线

three.js中的辅助线使用 1.网格辅助线&#xff08;GridHelper&#xff09; 2.坐标轴辅助线&#xff08;AxesHelper&#xff09; 3.模型骨骼辅助线(SkeletonHelper) 在上一篇 Three.js加载外部glb,fbx,gltf,obj 模型文件 的文章基础上新加入一个创建 辅助线的函数 createHel…

原型链污染例题复现

一、什么是原型链 下面我们通过这个小例子来看看。 可以看到b在实例化为test对象以后&#xff0c;就可以输出test类中的属性a了。这是因为在于js中的一个重要的概念&#xff1a;继承。而继承的整个过程就称为该类的原型链。 在javascript中,每个对象的都有一个指向他的原型(p…

CRM系统哪些功能可以个性化定制?

不同的企业有着不同的业务流程和需求&#xff0c;因此在选型时就需要一款可以个性化定制的CRM系统。下面说说可以个性化定制的CRM系统的功能和优势。 如何实现个性化定制&#xff1f; Zoho CRM支持个性化定制&#xff0c;您可以创建自定义功能模块、字段以及业务流程&#xf…

还在人工管理?太傻了!建筑行业高手给你支一招!

在现代科技日益发展的时代&#xff0c;智慧工地成为建筑行业的新兴趋势。借助先进的技术和数字化解决方案&#xff0c;智慧工地为建筑项目带来了前所未有的效率、安全性和可持续性。 智慧工地不仅提高了建筑施工的效率&#xff0c;也为管理人员提供了更好的决策依据和风险预测能…

MQTT(EMQX) - SpringBoot 整合MQTT 连接池 Demo - 附源代码 + 在线客服聊天架构图

MQTT 概述 MQTT (Message Queue Telemetry Transport) 是一个轻量级传输协议&#xff0c;它被设计用于轻量级的发布/订阅式消息传输&#xff0c;MQTT协议针对低带宽网络&#xff0c;低计算能力的设备&#xff0c;做了特殊的优化。是一种简单、稳定、开放、轻量级易于实现的消息…

DLL的引入方式(DllImport的特殊引入方式)

Dll引入方式有四种&#xff1a; 1.就是普通的比如一个解决方案中有多个项目&#xff0c;将其他项目的引入到该项目中 2.就是软件自带的程序集的引入 3.就是使用dll的引入&#xff08;普通的本身就是VS的dll文件&#xff09; 4.就是使用dll的引入&#xff08;不是属于该语言的…

网络音频终端音频编码解码终端

网络对讲终端SV-7011V 网络对讲终端SV-7011V&#xff0c;采用了ARM音频DSP架构&#xff0c;集网络对讲、网络广播、监听等功能于一身&#xff0c;内置麦克风、配置line out、line in、Mic in功能输出接口&#xff0c;适用于学校&#xff0c;机场&#xff0c;广场等场所。 产品…

解决 MySQL 删除数据后,ID 自增不连续问题

修复前 除了部分数据&#xff0c;导致后续新增的数据&#xff0c;ID 自增不连续 解决方案 执行下方 SQL 语句即可修复此问题&#xff0c;mbs_order为需要修复的表名 SET i0; UPDATE mbs_order SET id(i:i1); ALTER TABLE mbs_order AUTO_INCREMENT0;