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

訾博ZiBo

发布于 2025-01-06 11:23:30

5700

代码可运行

文章被收录于专栏：全栈开发工程师全栈开发工程师

运行总次数：0

代码可运行

Vue 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>

带默认值写法

// 接收父组件传参，带默认值
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、运行结果

二、相关探索结果

1、父组件中的响应式属性的值被修改后，该属性在子组件中的值也会被修改； 2、子组件中使用 const props = defineProps<{ msg: string }>() 定义接收的属性，可以直接访问，也可以通过 props 访问； 3、子组件中使用 const props = defineProps<{ msg: string }>() 定义接收的属性，子组件中的 props.msg 的值不是响应式的，是只读的，无法修改；

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-03-26，如有侵权请联系 cloudcommunity@tencent.com 删除

对象