Vue前端篇——Vue 3 中的对象接口 props

前言

在 Vue.js 的世界中，组件是构建用户界面的基石。而 props 则是组件之间传递数据的重要桥梁。Vue 3 引入了 Composition API，使得 props 的定义和使用更加灵活和强大。本文将深入探讨如何在 Vue 3 中使用 props，并通过一个具体的例子来展示其用法。

定义接口和类型

在 Vue 3 中，可以使用 TypeScript 来定义接口和类型，从而为 props 提供类型安全。这不仅有助于我们在编码阶段捕获错误，还能提高代码的可读性和可维护性。比如定义person接口：

代码语言：typescript复制

// 定义一个接口，限制每个Person对象的格式
export interface PersonInter {
  id: string;
  name: string;
  age: number;
}

// 定义一个自定义类型Persons
export type Persons = Array<PersonInter>;

在父组件中传递 `props`

在父组件 App.vue 中，可以通过 props 将数据传递给子组件 Person。这里我们使用了 reactive 函数来创建一个响应式的数据数组。

代码语言：vue复制

<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，以满足不同的需求。

第一种写法：仅接收

代码语言：typescript复制

const props = defineProps(['list']);

这种写法简单直接，但没有类型检查和默认值设置。

第二种写法：接收限制类型

代码语言：typescript复制

defineProps<{ list: Persons }>();

这种方式通过 TypeScript 的类型注解来限制 list 的类型，增加了代码的健壮性。

第三种写法：接收限制类型指定默认值限制必要性

代码语言：typescript复制

withDefaults(defineProps<{ list?: Persons }>(), {
  list: () => [{ id: 'ausydgyu01', name: '康师傅·王麻子·特仑苏', age: 19 },{ id: 'asdasg01', name: '小猪佩奇', age: 18 }]
})

这是最灵活的一种写法，它不仅限定了 list 的类型，还设置了默认值，并且通过 ? 表示 list 是可选的。

使用 `props`

在子组件的模板中，我们可以直接使用 props 中的数据。Vue 3 的模板语法非常直观，允许我们轻松地遍历数组并渲染列表。

代码语言：vue复制

<template>
  <div class="person">
    <ul>
      <li v-for="item in list" :key="item.id">
        {{ item.name }}--{{ item.age }}
      </li>
    </ul>
  </div>
</template>