Vue3 - 父子组件属性传递

最新推荐文章于 2025-09-18 13:59:34 发布

原创

最新推荐文章于 2025-09-18 13:59:34 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

本文介绍了在Vue3中如何进行父子组件间的属性传递。通过`defineProps`定义并设置父组件向子组件传递属性，如`starCount`和`color`，并使用`computed`处理响应式数据。同时，子组件通过`defineEmits`注册自定义事件，如`getValue`，并在事件触发时传递值给父组件。

Vue3 - 父子组件属性传递

前言
一. 组件之间属性的传递
- 1.1 父组件传递属性给子组件
- 1.2 子组件传递属性给父组件

前言

这节我们主要从案例出发，用Vue3的写法写父子组件之间的属性传递。

一. 组件之间属性的传递

我们定义一个Rate组件，具有以下功能：

接收来自外部组件传入的参数，starCount代表星星个数。color代表星星颜色。
需要根据传入星星的个数，展示对应数量的星星。

1.1 父组件传递属性给子组件

那么在编写组件的时候，我们需要注意什么？

我们可以使用defineProps来规范传递数据的格式。可以结合withDefaults来进行默认值的赋值。
如果是响应式数据的传递，在传递给子组件的时候，需要添加前缀 :。如果是常量，则不用。

我们在components目录下创建完Rate.ts文件后。完整代码如下：

<template>
  <div :style="fontstyle">
    {
   
   {
   
    rate }}
  </div>
</template>

<script setup lang="ts">
import {
   
    computed, defineProps, withDefaults } from "vue";

// 定义父组件传入的参数类型
interface Props {
   
   
  starCount: number;
  color: string;
}
// 规定传值类型以及赋上默认值
let props = withDefaults(defineProps<Props>(), {
   
   
  starCount: 0,