【vue3 入门到实战】8. props 的使用

目录

1. props介绍

2. 基本用法

1. props介绍

props 是用于父组件向子组件传递数据的主要机制。Vue 3 提供了更灵活和强大的方式来定义和使用 props

2. 基本用法

(1) 定义一个Person子组件

(2) 在父组件(App.vue)中引用子组件

(3) 结合ts接口进行类型检查

(4) 父组件中自定义属性，子组件中使用 defineProps 接收父组件传递过来的 props。

(5) 使用 withDefaults 设置默认值

代码如下

person.vue

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