vue3中接收props的两种写法

在 Vue 3 中,接收 props 有两种主要的写法,分别是运行时声明基于类型的声明。下面为你详细介绍这两种写法。

1. 运行时声明

运行时声明是 Vue 2 中就已经存在的方式,在 Vue 3 中依然可以使用。这种方式通过在组件中使用 defineProps 宏来定义 props,并且可以指定 props 的类型、默认值和验证规则。

示例代码
TypeScript 复制代码
<template>
  <div>
    <p>Name: {{ name }}</p>
    <p>Age: {{ age }}</p>
  </div>
</template>

<script setup>
// 使用运行时声明接收props
const props = defineProps({
  name: {
    type: String,
    required: true
  },
  age: {
    type: Number,
    default: 18
  }
});
</script>
代码解释
  • defineProps 是一个宏,用于定义组件的 props
  • nameage 是定义的两个 props
    • name 是一个必需的字符串类型的 prop
    • age 是一个可选的数字类型的 prop,默认值为 18

2. 基于类型的声明

基于类型的声明是 Vue 3 新增的特性,它利用 TypeScript 的类型系统来定义 props。这种方式更加简洁,并且可以提供更好的类型检查。

示例代码
TypeScript 复制代码
<template>
  <div>
    <p>Name: {{ name }}</p>
    <p>Age: {{ age }}</p>
  </div>
</template>

<script setup lang="ts">
// 使用基于类型的声明接收props
interface Props {
  name: string;
  age?: number;
}

const props = defineProps<Props>();
</script>
代码解释
  • 首先定义了一个 Props 接口,用于描述 props 的类型。
  • name 是一个必需的字符串类型的 prop
  • age 是一个可选的数字类型的 prop
  • defineProps<Props>() 使用泛型来指定 props 的类型。

两种写法的对比

  • 运行时声明:适用于不使用 TypeScript 的项目,或者需要定义复杂的验证规则和默认值的场景。
  • 基于类型的声明:适用于使用 TypeScript 的项目,它可以提供更好的类型检查和代码提示。

使用组件

无论使用哪种方式声明 props,使用组件时传递 props 的方式是相同的。

TypeScript 复制代码
<template>
  <MyComponent name="John" age="25" />
</template>

<script setup>
import MyComponent from './MyComponent.vue';
</script>

以上就是 Vue 3 中接收 props 的两种主要写法。

相关推荐
eric*16887 分钟前
尚硅谷张天禹老师课程配套笔记
前端·vue.js·笔记·vue·尚硅谷·张天禹·尚硅谷张天禹
程序员爱钓鱼23 分钟前
Go语言中的反射机制 — 元编程技巧与注意事项
前端·后端·go
GIS之路44 分钟前
GeoTools 结合 OpenLayers 实现属性查询(二)
前端·信息可视化
just小千1 小时前
重学React(二):添加交互
javascript·react.js·交互
烛阴1 小时前
一文搞懂 Python 闭包:让你的代码瞬间“高级”起来!
前端·python
AA-代码批发V哥1 小时前
HTML之表单结构全解析
前端·html
qq_589568101 小时前
element-plus按需自动导入的配置 以及icon图标不显示的问题解决
开发语言·javascript·ecmascript
聪聪的学习笔记1 小时前
【1】确认安装 Node.js 和 npm版本号
前端·npm·node.js
小磊哥er1 小时前
【前端工程化】你知道前端编码规范包含哪些内容吗
前端
菌菇汤2 小时前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app