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

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

文章目录

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

• 1、子组件
• 2、父组件
• 3、运行结果

1、子组件

<script setup lang="ts">
defineProps<{
  msg: string,
  student: {
    name: string,
    age: number,
  },
  students: {
    name: string,
    age: number,
  }[]
}>()
</script>

<template>
  <h1>简单传值：{{ msg }}</h1>
  <h1>传对象：{{ student }}</h1>
  <h1>传数组第一个值：{{ students[0] }}</h1>
  <h1>传数组第二个值：{{ students[1] }}</h1>
</template>

<style scoped>
</style>

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、运行结果