Vue前端篇——Vue 3 中的对象接口 props
原创
前言
在 Vue.js 的世界中，组件是构建用户界面的基石。而 props 则是组件之间传递数据的重要桥梁。Vue 3 引入了 Composition API，使得 props 的定义和使用更加灵活和强大。本文将深入探讨如何在 Vue 3 中使用 props，并通过一个具体的例子来展示其用法。
定义接口和类型
在 Vue 3 中，可以使用 TypeScript 来定义接口和类型，从而为 props 提供类型安全。这不仅有助于我们在编码阶段捕获错误，还能提高代码的可读性和可维护性。比如定义person接口：
// 定义一个接口，限制每个Person对象的格式
export interface PersonInter {
id: string;
name: string;
age: number;
}
// 定义一个自定义类型Persons
export type Persons = Array<PersonInter>;在父组件中传递 props
在父组件 App.vue 中，可以通过 props 将数据传递给子组件 Person。这里我们使用了 reactive 函数来创建一个响应式的数据数组。
<template>
<Person :list="persons" />
</template>
<script lang="ts" setup name="App">
import Person from './components/Person.vue';
import { reactive } from 'vue';
import { type Persons } from './types';
let persons = reactive<Persons>([
{ id: 'e98219e12', name: '张三', age: 18 },
{ id: 'e98219e13', name: '李四', age: 19 },
{ id: 'e98219e14', name: '王五', age: 20 }
]);
</script>在子组件中接收 props
在子组件 Person.vue 中，可以使用 defineProps 函数来定义接收的 props。Vue 3 提供了几种不同的方式来定义 props，以满足不同的需求。
第一种写法：仅接收
const props = defineProps(['list']);这种写法简单直接，但没有类型检查和默认值设置。
第二种写法：接收 + 限制类型
defineProps<{ list: Persons }>();这种方式通过 TypeScript 的类型注解来限制 list 的类型，增加了代码的健壮性。
第三种写法：接收 + 限制类型 + 指定默认值 + 限制必要性
withDefaults(defineProps<{ list?: Persons }>(), {
list: () => [{ id: 'ausydgyu01', name: '康师傅·王麻子·特仑苏', age: 19 },{ id: 'asdasg01', name: '小猪佩奇', age: 18 }]
})这是最灵活的一种写法，它不仅限定了 list 的类型，还设置了默认值，并且通过 ? 表示 list 是可选的。
使用 props
在子组件的模板中，我们可以直接使用 props 中的数据。Vue 3 的模板语法非常直观，允许我们轻松地遍历数组并渲染列表。
<template>
<div class="person">
<ul>
<li v-for="item in list" :key="item.id">
{{ item.name }}--{{ item.age }}
</li>
</ul>
</div>
</template>运行结果
总结
Vue 3 的 props 系统结合了 TypeScript 的类型安全和 Vue 的灵活性，为我们提供了一种强大而灵活的方式来构建组件化的应用程序。通过定义接口和类型，我们可以在编译阶段捕获错误，提高代码质量。而在组件中使用 props，我们可以轻松地实现数据的传递和共享。
在实际开发中，应该充分利用 TypeScript 的类型系统来定义 props，这样不仅可以避免运行时的类型错误，还能使代码更加清晰和易于维护。同时，了解不同的 props 定义方式可以帮助我们根据不同的场景选择最合适的写法，从而优化我们的应用性能和开发体验。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
