Vue3从入门到精通（四）：组件基础与父子组件通信—— 学会 Vue3 组件的创建、注册与使用，掌握 props 传值、emit 事件触发，实现简单父子组件数据交互

在前三篇教程中，我们依次掌握了Vue3环境搭建、模板语法、响应式数据（ref/reactive）及v-model表单应用，能够实现基础的页面渲染和简单交互。本节课将进入Vue3开发的核心模块——组件，组件是Vue3中代码复用、页面拆分的核心载体，学会组件的创建、注册与使用，以及父子组件间的通信，是开发复杂Vue应用的必备能力。

本文依旧坚持“理论通俗化、案例实战化”的原则，从组件基础概念入手，逐步讲解组件的创建方式、全局/局部注册，重点突破父子组件通信的核心技巧（props传值、emit事件触发），最后通过综合案例，实现父子组件的数据交互，让新手能快速上手组件开发，理解组件化开发的核心思想。

一、核心认知：什么是Vue3组件？

组件（Component）是Vue3中可复用的、独立的页面单元，通俗来说，就是把一个复杂的页面拆分成多个“小模块”，每个模块负责一个特定的功能，这些“小模块”就是组件。比如一个页面中，导航栏、轮播图、列表、底部版权信息，都可以拆分成独立的组件。

组件的核心优势的是复用性和可维护性：

• 复用性：同一个组件可以在多个页面中重复使用（如导航栏组件，在所有页面都可以复用），减少重复代码；

• 可维护性：页面拆分后，每个组件的功能单一，后续修改某个功能（如修改导航栏样式），只需修改对应的组件，不会影响整个页面的其他部分，降低维护成本。

新手类比理解：组件就像“乐高积木”，每个积木都是一个独立的组件，通过拼接不同的积木，就能搭建出复杂的“页面模