Vue3 组件基础

引言

Vue 3 组件是 Vue.js 框架中的核心可复用 UI 构建块，它将 HTML 结构、CSS 样式和 JavaScript 逻辑封装在一起，形成独立且可组合的视图单元。组件通过 Props 接收外部数据输入，同时可以触发自定义事件以进行通信，并利用 Vue 3 的响应式系统（如 ref 和 reactive）实现状态管理与视图更新。

组件允许我们将 UI 划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。在实际应用中，组件常常被组织成层层嵌套的树状结构。
这种组织方式类似于嵌套 HTML 元素，Vue 实现了自己的组件模型，使我们可以在每个组件内封装自定义内容与逻辑。

单文件组件

使用构建工具开发时，Vue 推荐使用单文件组件（SFC），以 .vue 为文件后缀，它能将组件的模板、逻辑、样式封装在一个文件中，是 Vue 3 最主流的组件编写方式。

基础示例

<script setup>
// 组件逻辑：组合式 API
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <!-- 组件模板：HTML 结构 -->
  <button @click="count++">You clicked me {{ count }} times.</button>
</template>

<style scoped>
/* 组件样式：作用域样式，仅当前组件生效 */
button {
  padding: 8 px 16 px;
  cursor: pointer;
}
</style>

核心解析

<script setup>：Vue 3 专属语法糖，简化组合式 API 写法，无需手动导出，变量 / 方法可直接在模板中使用；
<template>：组件的视图结构，支持所有 Vue 指令、插值表达式、组件嵌套；
<style scoped>：添加 scoped 属性后，样式仅作用于当前组件，避免全局样式污染；
响应式状态：通过 ref/reactive 声明，驱动视图自动更新。

组件的使用与注册

在 <script setup> 语法中，导入组件后即可直接使用，无需手动注册，这是 Vue 3 极大的简化优化。

父组件使用子组件

<!-- 父组件：App.vue -->
<script setup>
// 1. 导入子组件
import Counter from './Counter.vue'
</script>

<template>
  <div>
    <h1>Vue 3 组件演示</h1>
    <!-- 2. 模板中直接使用组件 -->
    <Counter />
    <Counter />
  </div>
</template>

组件通信

组件是独立的单元，嵌套使用时需要通过通信传递数据，Vue 3 提供了最基础的两种通信方式。

Props 父组件向子组件传值

Props 是子组件接收父组件数据的通道，支持类型校验、默认值等配置。

子组件（Child.vue）

<script setup>
// 定义 Props，接收父组件数据
const props = defineProps({
  title: {
    type: String,
    default: '默认标题'
  }
})
</script>

<template>
  <h2>{{ title }}</h2>
</template>

父组件使用

<Child title="父组件传递的标题" />

自定义事件

子组件向父组件传值

子组件通过 defineEmits 触发事件，父组件监听事件接收数据。

子组件

<script setup>
// 定义自定义事件
const emit = defineEmits(['change-count'])
const count = ref(0)

// 触发事件，向父组件传值
const handleClick = () => {
  count.value++
  emit('change-count', count.value)
}
</script>

<template>
  <button @click="handleClick">点击传值</button>
</template>

父组件监听

<Child @change-count="(val) => console.log('子组件值：', val)" />

组件嵌套结构

Vue 组件支持多层嵌套，形成树状结构，是大型项目的核心组织形式。

<!-- 根组件 → 页面组件 → 模块组件 → 基础组件 -->
<template>
  <HomePage>
    <Header />
    <Content>
      <Card />
      <List />
    </Content>
    <Footer />
  </HomePage>
</template>

组件开发规范

命名规范

组件文件：使用大驼峰命名（Counter.vue、UserInfo.vue）；
模板使用：可使用大驼峰或短横线命名（<Counter/> / <counter/>）。

样式隔离

必须使用 scoped 属性，避免组件样式相互干扰，是团队开发的强制规范。

复用原则

将重复的 UI/ 逻辑抽离为独立组件，提升代码复用性和可维护性。

总结

核心形态：Vue 3 组件以 .vue 单文件组件为核心，包含模板、脚本、样式三部分；
使用方式：<script setup> 中导入即可直接使用，无需注册；
基础通信：defineProps 父传子、defineEmits 子传父，是组件通信的基础；
工程规范：样式加 scoped、组件大驼峰命名、多层嵌套构建项目结构。