Vue props详解：组件间数据传递的核心技巧

PeterMap
5 阅读12分钟

在Vue组件化开发中，组件并非孤立存在，父组件与子组件之间的 data 通信是构建复杂应用的基础。而 props 作为Vue中父传子数据传递的核心方式，承担着将父组件数据灵活传递给子组件、实现组件复用与解耦的重要作用。无论是构建博客列表、商品卡片，还是复杂的表单组件，掌握 props 的用法都能让你的组件设计更具灵活性和可维护性。

本文将从 props 的本质出发，一步步拆解其声明方式、传递技巧、使用场景，结合博客开发的实战场景，用全新自定义代码示例，帮你彻底掌握 props 的核心用法，避开常见误区，让组件间的数据传递更高效、更规范。

一、props 是什么？核心作用是什么？

props 是 Vue 中用于父组件向子组件传递数据的特殊属性，本质上是父组件给子组件的“输入参数”。它就像函数的形参一样，子组件通过声明 props 来指定可以接收哪些数据，父组件则通过绑定这些 props，将具体数据传递给子组件，实现父子组件间的单向数据通信。

props 的核心作用有两个：

  • 实现数据单向传递：父组件数据变化时，会自动同步到子组件，但子组件不能直接修改 props（保证数据流向清晰，避免数据混乱）；
  • 实现组件复用：通过传递不同的 props 数据，让同一个子组件呈现不同的内容，比如博客列表中，同一个博客卡片组件，通过传递不同文章的标题、内容，渲染出多个不同的博客项。

举个最直观的例子：我们要开发一个博客列表页面，父组件负责存储所有博客文章数据，子组件负责渲染单篇博客的布局（标题、摘要、发布时间）。此时，父组件就可以通过 props 将每篇文章的具体数据传递给子组件，子组件根据接收的 props 渲染对应内容，实现博客卡片的复用。

二、props 的基础用法：声明与传递

使用 props 只需两步：子组件声明可接收的 props，父组件向子组件传递 props 数据。其中，子组件的声明方式分为两种，根据是否使用

1. 子组件：声明 props

在 < script setup > 中，我们使用 Vue 内置的 compile 宏 defineProps 来声明子组件可接收的 props，无需显式导入，直接使用即可。声明方式分为两种：简单声明（仅指定 props 名称）和详细声明（指定类型、必填项、默认值等，提升代码健壮性）。

方式1：简单声明（适用于简单场景）

如果只需指定可接收的 props 名称，无需限制类型，可直接将 props 名称以数组形式传入 defineProps。

示例：子组件（BlogItem.vue），接收博客标题和摘要两个 props：

<script setup>
// 简单声明 props：接收 title 和 summary 两个属性
defineProps(['title', 'summary'])
</script>

<template>
  <div class="blog-item">
    <h3 class="blog-title">{{ title }}</h3>
    <p class="blog-summary">{{ summary }}</p>
  </div>
</template>

<style scoped>
.blog-item {
  padding: 16px;
  border-bottom: 1px solid #eee;
  margin-bottom: 12px;
}
.blog-title {
  margin: 0 0 8px 0;
  color: #333;
  font-size: 18px;
}
.blog-summary {
  margin: 0;
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}
</style>

这种方式简单快捷，但无法限制 props 的类型，若父组件传递的数据类型与预期不符，可能会导致渲染异常，适合简单场景或快速调试。

方式2：详细声明（推荐，适用于实际开发）

实际开发中，为了保证代码的健壮性，我们通常会给 props 指定类型、必填项、默认值等约束，避免传递错误数据。此时，defineProps 接收一个对象，对象的 key 是 props 名称，value 是约束配置。

示例：优化 BlogItem.vue，给 props 增加约束：

<script setup>
// 详细声明 props，指定类型、必填项、默认值
const props = defineProps({
  // 博客标题：字符串类型，必填
  title: {
    type: String,
    required: true
  },
  // 博客摘要：字符串类型，非必填，默认值为空字符串
  summary: {
    type: String,
    default: ''
  },
  // 发布时间：日期类型，非必填，默认值为当前日期
  publishTime: {
    type: Date,
    default: () => new Date()
  }
})

// 可以通过 defineProps 返回的 props 对象，在 JavaScript 中访问 props 数据
console.log('博客标题：', props.title)
console.log('发布时间：', props.publishTime)
</script>

<template>
  <div class="blog-item">
    <h3 class="blog-title">{{ title }}</h3>
    <p class="blog-publish">发布时间：{{ publishTime.toLocaleDateString() }}</p>
    <p class="blog-summary">{{ summary || '暂无摘要' }}</p>
  </div>
</template>

常用的约束配置说明：

  • type：指定 props 的数据类型，可选值为 String、Number、Boolean、Array、Object、Date 等，若父组件传递的类型不匹配，Vue 会在控制台抛出警告；
  • required：布尔值，true 表示该 props 为必填项，父组件必须传递，否则会抛出警告；
  • default：指定 props 的默认值，当父组件未传递该 props 时，会使用默认值；若类型为 Object 或 Array，默认值需用函数返回（避免多个组件实例共享同一个引用类型数据）。

2. 父组件：传递 props

子组件声明好 props 后，父组件就可以通过“属性绑定”的方式，将数据传递给子组件。传递方式分为两种：静态传递（传递固定值）和动态传递（传递响应式数据或变量）。

方式1：静态传递（传递固定值）

如果传递的数据是固定值（非变量），可以直接像 HTML 属性一样传递，无需使用 v-bind 语法。

示例：父组件（BlogList.vue）静态传递 props：

<script setup>
// 导入子组件
import BlogItem from './BlogItem.vue'
</script>

<template>
  <div class="blog-list">
    <h2>我的博客列表&lt;/h2&gt;
    <!-- 静态传递 props：直接赋值固定值 -->
    <BlogItem 
      title="Vue props 实战指南" 
      summary="详细讲解 Vue props 的声明、传递与使用技巧，适合初学者入门。"
    />
    <BlogItem 
      title="组件化开发的核心优势" 
      summary="组件化开发能提升代码复用率，降低维护成本，是 Vue 开发的核心思想。"
    />
  </div>
</template>

方式2：动态传递（传递响应式数据）

实际开发中，我们传递的数据往往是动态的（比如从接口请求的数据、响应式变量），此时需要使用 v-bind 语法（简写为 :），将父组件的变量或响应式数据传递给子组件。

示例：父组件（BlogList.vue）动态传递响应式博客数据：

<script setup>
import { ref } from 'vue'
import BlogItem from './BlogItem.vue'

// 响应式博客数据（模拟接口请求返回的数据）
const blogs = ref([
  {
    id: 1,
    title: 'Vue props 实战指南',
    summary: '详细讲解 Vue props 的声明、传递与使用技巧，适合初学者入门。',
    publishTime: new Date('2026-04-10')
  },
  {
    id: 2,
    title: '组件化开发的核心优势',
    summary: '组件化开发能提升代码复用率，降低维护成本，是 Vue 开发的核心思想。',
    publishTime: new Date('2026-04-08')
  },
  {
    id: 3,
    title: 'Vue 响应式原理简析',
    summary: '深入浅出讲解 Vue 响应式原理，理解数据驱动视图的核心逻辑。',
    publishTime: new Date('2026-04-05')
  }
])

// 响应式变量，用于动态修改某个博客的标题
const newTitle = ref('Vue props 进阶技巧')
</script>

<template>
  <div class="blog-list">
    <h2>我的博客列表</h2&gt;
    <!-- 1. 结合 v-for 动态渲染多个子组件，传递数组中的数据 -->
    <BlogItem 
      v-for="blog in blogs"
      :key="blog.id"  <!-- 必须绑定 key，提升渲染性能 -->
      :title="blog.title"
      :summary="blog.summary"
      :publish-time="blog.publishTime"  <!--  kebab-case 对应子组件的 camelCase -->
    /&gt;

    <!-- 2. 传递响应式变量 -->
    <BlogItem 
      :title="newTitle"
      summary="这是一篇关于 props 进阶的博客，持续更新中..."
    />
  </div>
</template>

这里有两个关键注意点：

  • 动态传递时，必须使用 v-bind 语法（:），否则 Vue 会将传递的值当作字符串处理，而非变量；
  • HTML 标签属性不区分大小写，因此父组件传递 props 时，若子组件的 props 是 camelCase（如 publishTime），父组件中需使用 kebab-case（publish-time），Vue 会自动将 kebab-case 转换为 camelCase，匹配子组件的 props 声明。

三、非 < script setup> 语法：props 的声明与使用

如果不使用 < script setup> 语法（传统选项式 API），props 的声明方式会有所不同，需要通过 props 选项来声明，且 props 对象会作为 setup() 函数的第一个参数传入。

示例：非 < script setup> 方式的子组件（BlogItem.vue）：

<script>
export default {
  // 选项式 API 声明 props
  props: {
    title: {
      type: String,
      required: true
    },
    summary: {
      type: String,
      default: ''
    }
  },
  // setup 函数接收 props 作为第一个参数
  setup(props) {
    console.log('博客标题：', props.title)
    // 可以在 setup 中使用 props 数据，但不能修改
  },
  // 模板中使用 props 与 <script setup> 一致
  template: `
    <div class="blog-item">
      <h3>{{ title }}</h3>
      <p>{{ summary || '暂无摘要' }}</p>
    </div>
  `
}
</script>

这种方式适用于老项目或不熟悉

四、props 的核心注意事项：避开这些坑

使用 props 时，有几个核心注意事项必须牢记，否则容易出现数据混乱、渲染异常等问题，尤其是初学者容易踩坑。

1. props 是只读的，子组件不能直接修改

Vue 规定，props 是单向数据流，父组件传递给子组件的 props，子组件只能使用，不能直接修改。如果子组件尝试修改 props，Vue 会在控制台抛出警告，同时修改不会生效。

错误示例（禁止这样做）：

<script setup>
const props = defineProps(['title'])

// 错误：直接修改 props
const changeTitle = () => {
  props.title = '修改后的标题' // 会抛出警告，修改无效
}
</script>

正确做法：如果子组件需要修改 props 数据，需通过“子传父”的方式，让父组件修改原始数据，进而同步到子组件（后续会专门讲解子传父，这里简单演示）：

// 子组件：抛出自定义事件，通知父组件修改数据
<script setup>
const props = defineProps(['title'])
const emit = defineEmits(['update-title'])

const changeTitle = () => {
  // 向父组件传递新的标题
  emit('update-title', '修改后的标题')
}
</script>

<template>
  <h3>{{ title }}</h3>
  <button @click="changeTitle">修改标题</button>
</template>

// 父组件：监听事件，修改原始数据
<template>
  <BlogItem 
    :title="blogTitle"
    @update-title="blogTitle = $event"
  />
</template>

2. props 的类型校验要严谨

实际开发中，一定要给 props 加上类型校验（type），避免父组件传递错误类型的数据，导致子组件渲染异常。比如子组件期望接收 String 类型的标题，父组件却传递了 Number 类型，可能会导致模板渲染错误。

如果需要 props 支持多种类型，可以将 type 设置为数组：

const props = defineProps({
  // 支持 String 或 Number 类型
  id: {
    type: [String, Number],
    required: true
  }
})

3. 引用类型 props 的默认值需用函数返回

如果 props 的类型是 Object 或 Array（引用类型），默认值必须用函数返回，否则多个子组件实例会共享同一个引用类型数据，修改其中一个组件的 props，会影响其他组件。

正确示例：

const props = defineProps({
  // 引用类型 props，默认值用函数返回
  author: {
    type: Object,
    default: () => ({
      name: '未知作者',
      avatar: 'https://via.placeholder.com/40'
    })
  }
})

错误示例（禁止这样做）：

const props = defineProps({
  author: {
    type: Object,
    default: { name: '未知作者' } // 错误：多个组件实例共享同一个对象
  }
})

4. 避免 props 命名冲突

props 的名称不要与 Vue 内置属性、HTML 原生属性重名（如 id、class、style、v-model 等），否则会覆盖内置属性，导致异常。比如 props 命名为 class，会覆盖子组件的 class 属性，影响样式渲染。

五、props 实战场景：博客详情页的实现

结合前面的知识点，我们用 props 实现一个完整的博客详情页场景：父组件（BlogDetail.vue）请求博客详情数据，通过 props 传递给子组件（BlogContent.vue），子组件渲染博客的标题、内容、作者、发布时间等信息。

1. 子组件（BlogContent.vue）：声明 props 并渲染内容

<script setup>
const props = defineProps({
  // 博客标题：字符串，必填
  title: {
    type: String,
    required: true
  },
  // 博客内容：字符串，必填
  content: {
    type: String,
    required: true
  },
  // 作者信息：对象，非必填，有默认值
  author: {
    type: Object,
    default: () => ({
      name: '未知作者',
      avatar: 'https://via.placeholder.com/40'
    })
  },
  // 发布时间：日期类型，非必填
  publishTime: {
    type: Date,
    default: () => new Date()
  }
})
</script>

<template>
  <div class="blog-detail">
    <h1 class="detail-title">{{ title }}</h1>
    <div class="detail-meta">
      <img :src="author.avatar" alt="作者头像" class="author-avatar">
      <span class="author-name">{{ author.name }}</span>
      <span class="publish-time">{{ publishTime.toLocaleString() }}</span>
    </div>
    <div class="detail-content" v-html="content"></div>
  </div>
</template>

<style scoped>
.blog-detail {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}
.detail-title {
  color: #333;
  font-size: 24px;
  margin: 0 0 16px 0;
  text-align: center;
}
.detail-meta {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  color: #666;
  font-size: 14px;
}
.author-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 8px;
}
.author-name {
  margin-right: 16px;
}
.detail-content {
  line-height: 1.8;
  color: #444;
  font-size: 16px;
}
</style>

2. 父组件（BlogDetail.vue）：传递 props 数据

<script setup>
import { ref, onMounted } from 'vue'
import BlogContent from './BlogContent.vue'

// 响应式博客详情数据
const blogDetail = ref({})

// 模拟接口请求，获取博客详情
onMounted(() => {
  // 实际开发中替换为真实接口请求
  setTimeout(() => {
    blogDetail.value = {
      title: 'Vue props 实战指南：从入门到精通',
      content: `<p>props 是 Vue 中父传子数据传递的核心方式，本文从基础用法到实战场景，详细讲解了 props 的声明、传递、校验等知识点。</p>
      <p>通过 props，我们可以实现组件的复用，让父组件与子组件之间的数据通信更规范、更清晰。</p>
      <p>掌握 props 的核心用法，能让你的 Vue 组件开发更高效、更健壮。</p>`,
      author: {
        name: '前端小能手',
        avatar: 'https://via.placeholder.com/40'
      },
      publishTime: new Date('2026-04-16')
    }
  }, 1000)
})
</script>

&lt;template&gt;
  &lt;div class="blog-detail-page"&gt;
    <!-- 加载中状态 -->
    <div v-if="!blogDetail.title" class="loading"&gt;加载中...&lt;/div&gt;
    
    <!-- 博客详情内容，动态传递 props -->
    <BlogContent
      v-else
      :title="blogDetail.title"
      :content="blogDetail.content"
      :author="blogDetail.author"
      :publish-time="blogDetail.publishTime"
    />
  </div>
</template>

<style scoped>
.loading {
  text-align: center;
  padding: 50px;
  font-size: 18px;
  color: #666;
}
</style>

这个实战场景完美体现了 props 的核心价值：父组件负责获取数据，子组件负责渲染内容，通过 props 实现数据传递，组件职责清晰，可维护性和复用性大大提升。

六、总结：props 是组件通信的基础，也是组件复用的关键

props 作为 Vue 中父传子数据传递的核心方式，看似简单，却承载着组件复用和数据解耦的重要作用。掌握 props 的声明、传递、校验和注意事项，能让你在组件开发中避开大部分坑，写出更规范、更健壮的代码。

最后，总结一下 props 的核心要点：

  • props 是父传子的单向数据流，子组件只读，不能直接修改；
  • 子组件通过 defineProps 声明 props，支持简单声明和详细声明（推荐后者）；
  • 父组件通过静态赋值或 v-bind 动态传递 props，kebab-case 匹配子组件的 camelCase；
  • 引用类型 props 的默认值需用函数返回，避免共享引用；
  • 严谨的类型校验能提升代码健壮性，避免数据类型错误。

props 是 Vue 组件通信中最基础、最常用的方式，后续我们还会讲解子传父、兄弟组件通信、跨层级组件通信等高级技巧，让你彻底掌握 Vue 组件通信的全场景用法。希望本文能帮助你真正理解 props 的核心逻辑，在实际开发中灵活运用，打造更优秀的 Vue 应用。

avatar
文章
阅读
粉丝