当前位置：首页 > news >正文

Vue: 组件基础

news 2025/9/17 6:22:53

1. 组件概念与优势

1.1 什么是组件？

组件是Vue的核心特性之一，允许我们将UI划分为独立的、可重用的部分，每个部分可以单独思考和开发。

1.2 组件树结构

应用根组件
├── 头部组件
├── 导航组件
└── 内容区域组件├── 文章组件├── 侧边栏组件└── 评论组件

1.3 组件优势

可复用性：一次编写，多处使用
可维护性：每个组件功能独立，易于维护
协作开发：不同开发者可同时开发不同组件

2. 定义组件

2.1 单文件组件(SFC)

使用.vue文件定义组件，包含三个部分：

<template><!-- HTML模板 --><button @click="count++">You clicked me {{ count }} times.</button>
</template><script setup>
import { ref } from 'vue'
// JavaScript逻辑
const count = ref(0)
</script><style>
/* CSS样式 */
</style>

2.2 非构建环境组件

使用JavaScript对象定义：

import { ref } from 'vue'export default {setup() {const count = ref(0)return { count }},template: `<button @click="count++">You clicked me {{ count }} times.</button>`
}

3. 使用组件

3.1 组件注册与使用

<script setup>
// 1. 导入组件
import ButtonCounter from './ButtonCounter.vue'
</script><template><!-- 2. 使用组件 --><h1>Here is a child component!</h1><ButtonCounter /><ButtonCounter /><ButtonCounter />
</template>

3.2 组件命名规范

环境	命名方式	示例
单文件组件	PascalCase	`<ButtonCounter>`
DOM内模板	kebab-case	`<button-counter>`

4. 组件通信

4.1 Props（父→子通信）

父组件传递数据：

<BlogPost title="My journey with Vue" />
<BlogPost :title="post.title" /> <!-- 动态prop -->

子组件接收数据：

<script setup>
// 方式1: 使用defineProps
const props = defineProps(['title'])
console.log(props.title)// 方式2: 选项式API
export default {props: ['title'],setup(props) {console.log(props.title)}
}
</script><template><h4>{{ title }}</h4>
</template>

4.2 自定义事件（子→父通信）

子组件触发事件：

<script setup>
const emit = defineEmits(['enlarge-text'])// 触发事件
function enlargeText() {emit('enlarge-text')
}
</script><template><button @click="$emit('enlarge-text')">Enlarge text</button>
</template>

父组件监听事件：

<BlogPost @enlarge-text="postFontSize += 0.1" />

4.3 组件通信流程图

父组件│├── 通过Props传递数据 → 子组件│└── 通过v-on监听事件 ← 子组件通过$emit发送事件

5. 插槽(Slot)

5.1 基本插槽使用

定义带插槽的组件：

<template><div class="alert-box"><strong>This is an Error for Demo Purposes</strong><slot /> <!-- 插槽位置 --></div>
</template>

使用插槽：

<AlertBox>Something bad happened. <!-- 插入的内容 -->
</AlertBox>

6. 动态组件

6.1 动态切换组件

<script setup>
import Home from './Home.vue'
import Posts from './Posts.vue'
import Archive from './Archive.vue'
import { ref } from 'vue'const currentTab = ref('Home')
const tabs = {Home,Posts,Archive
}
</script><template><buttonv-for="(_, tab) in tabs":key="tab"@click="currentTab = tab">{{ tab }}</button><component :is="tabs[currentTab]" class="tab"></component>
</template>

6.2 保持组件状态

使用<KeepAlive>保持动态组件状态：

<KeepAlive><component :is="activeComponent" />
</KeepAlive>

7. DOM内模板解析注意事项

7.1 大小写转换

JavaScript中	DOM模板中
`PascalCase`	`kebab-case`
`camelCase`	`kebab-case`

7.2 闭合标签要求

<!-- 正确 -->
<my-component></my-component><!-- 在DOM模板中错误 -->
<my-component />

7.3 元素位置限制解决方案

<table><!-- 使用is属性解决元素限制 --><tr is="vue:blog-post-row"></tr>
</table>

8. 总结与核心概念

8.1 组件核心概念图

组件系统
├── 组件定义
│   ├── 单文件组件(.vue)
│   └── JavaScript对象
├── 组件使用
│   ├── 局部注册
│   └── 全局注册
├── 组件通信
│   ├── Props(向下传递)
│   ├── 事件(向上传递)
│   └── 插槽(内容分发)
└── 高级特性├── 动态组件└── 保持状态(KeepAlive)