从零封装第一个 Vue 组件：极简入门指南

Vue 组件是 Vue 框架的核心特性之一，它能将页面拆分为独立、可复用的模块，让代码结构更清晰。本文将以 Vue 3 + 单文件组件（SFC）为例，手把手教你封装一个最简单的 Vue 组件，零基础也能快速上手。

一、Vue 组件的核心结构

一个标准的 Vue 单文件组件（.vue 文件）由三部分组成，这是组件的基础骨架，缺一不可：

<template>：组件的 HTML 结构，负责页面渲染，必须有且仅有一个根元素；
<script setup>：组件的逻辑层，处理数据、方法、事件等（Vue3 setup 语法糖是目前最简洁的写法）；
<style scoped>：组件的样式层，scoped 属性确保样式仅作用于当前组件，避免样式污染。

二、封装第一个极简 Vue 组件

我们以一个 "点击修改文字" 的组件为例，完整代码如下（文件路径：src/components/xx.vue）：

复制代码

<template>
  <div class="hello-world">
    <!-- 插值语法显示动态数据 -->
    <h1>{{ message }}</h1>
    <!-- 事件绑定触发方法 -->
    <button @click="changeMessage">点击修改文字</button>
  </div>
</template>

<script setup>
// 引入Vue3响应式API
import { ref } from 'vue'

// 定义响应式数据
const message = ref('你好，这是我的第一个Vue组件！')

// 定义点击事件方法
const changeMessage = () => {
  message.value = '文字被修改啦！🎉'
}
</script>

<style scoped>
.hello-world {
  text-align: center;
  margin-top: 50px;
}

button {
  padding: 8px 16px;
  margin-top: 20px;
  cursor: pointer;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
}

button:hover {
  background-color: #359469;
}
</style>

关键代码解释

模板部分 ：{``{ message }} 是 Vue 的插值语法，用于渲染响应式数据；@click 是事件绑定语法，绑定按钮的点击事件到changeMessage方法。
逻辑部分 ：
- ref 是 Vue3 的核心响应式 API，用于定义基本类型（字符串、数字等）的响应式数据；
- 修改ref定义的响应式数据时，需通过.value操作（模板中无需加.value）。
样式部分 ：scoped 是关键属性，能隔离组件样式，避免多个组件样式冲突。

三、使用封装好的组件

组件封装完成后，需要在父组件中引入并使用，以 App.vue 为例：

复制代码

<template>
  <div id="app">
    <!-- 以标签形式使用组件 -->
    <HelloWorld />
  </div>
</template>

<script setup>
// 引入封装好的组件
import HelloWorld from './components/HelloWorld.vue'
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
</style>

四、运行组件的前置条件

先通过npm create vue@latest创建 Vue3 项目（默认支持单文件组件）；
进入项目目录执行npm install安装依赖；
执行npm run dev启动项目，即可在浏览器中看到组件效果。

五、核心知识点总结

Vue 单文件组件的核心是 "结构 - 逻辑 - 样式" 分离，template、script setup、style scoped三部分构成组件基础；
Vue3 中用ref定义响应式数据，逻辑层修改需加.value，模板层直接使用变量名即可；
组件使用遵循 "引入 - 调用" 两步法：先通过import引入组件，再在模板中以标签形式调用。

本文封装的是最基础的 Vue 组件，实际开发中组件会包含 Props 传参、Emit 触发父组件事件、插槽等功能，但核心结构和思路始终不变。掌握这个极简示例，就能为后续封装复杂组件打下坚实基础。