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 触发父组件事件、插槽等功能，但核心结构和思路始终不变。掌握这个极简示例，就能为后续封装复杂组件打下坚实基础。