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 的两种主要写法。

相关推荐
帅夫帅夫23 分钟前
深入理解 JWT:结构、原理与安全隐患全解析
前端
Struggler28132 分钟前
google插件开发:如何开启特定标签页的sidePanel
前端
爱编程的喵44 分钟前
深入理解JSX:从语法糖到React的魔法转换
前端·react.js
代码的余温1 小时前
CSS3文本阴影特效全攻略
前端·css·css3
AlenLi1 小时前
JavaScript - 策略模式在开发中的应用
前端
xptwop1 小时前
05-ES6
前端·javascript·es6
每天开心1 小时前
告别样式冲突:CSS 模块化实战
前端·css·代码规范
wxjlkh1 小时前
powershell 批量测试ip 端口 脚本
java·服务器·前端
海底火旺1 小时前
单页应用路由:从 Hash 到懒加载
前端·react.js·性能优化
每天开心1 小时前
噜噜旅游App(3)——打造个性化用户中心:AI生成头像与交互设计
前端·前端框架