Vue 3 子组件接受父组件传参数

末蓝、 2023-09-26 20:20 16阅读 0赞

## Vue 3 子组件接受父组件传参数 ##

#### 文章目录 ####

*  Vue 3 子组件接受父组件传参数
 *   *  1、子组件
     *   *  带默认值写法
     *  2、父组件
     *  3、运行结果

### 1、子组件 ###

#### 带默认值写法 ####

// 接收父组件传参，带默认值
    const props = withDefaults(defineProps<{
          
      row?: DocSend,
      isEdit?: boolean
    }>(), {
        
      row: undefined,
      isEdit: false
    });

### 2、父组件 ###

<template>
      <Hello msg="訾博" :student="student" :students="students" />
    </template>
    
    <script setup lang="ts">
    import Hello from "./components/Hello.vue";
    // 对象
    const student = {
        
      name: "訾博",
      age: 26,
    };
    // 对象数组
    const students = [
      {
        
        name: "訾博1",
        age: 26,
      },
      {
        
        name: "訾博2",
        age: 26,
      },
    ];
    </script>

### 3、运行结果 ###

![在这里插入图片描述][ac374b1981e544de8055f320f7fc7d16.png]

[ac374b1981e544de8055f320f7fc7d16.png]: https://img-blog.csdnimg.cn/ac374b1981e544de8055f320f7fc7d16.png