从零封装第一个 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>

关键代码解释

三、使用封装好的组件

组件封装完成后，需要在父组件中引入并使用，以 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>

四、运行组件的前置条件

五、核心知识点总结

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