Vue3 组件核心知识点详解
面向编程小白的通俗易懂版组件指南，涵盖核心概念、使用方法和最佳实践
1. 组件基础
组件是Vue应用的基本构建块，就像乐高积木一样，你可以组合它们来构建复杂的应用。
为什么使用组件？
- 代码复用：一次编写，多次使用
- 代码组织：将复杂页面拆分为独立部分
- 团队协作：不同成员可同时开发不同组件
组件结构
一个典型的Vue组件包含三部分：
<template>
<!– HTML结构 –>
</template>
<script>
// JavaScript逻辑
export default {
// 组件选项
}
</script>
<style>
/* CSS样式 */
</style>
<!– HTML结构 –>
</template>
<script>
// JavaScript逻辑
export default {
// 组件选项
}
</script>
<style>
/* CSS样式 */
</style>
组件实例
基础计数器
0
2. Props – 父子组件通信
Props是从父组件传递给子组件的数据。就像给函数传递参数一样。
Props要点：
- 单向数据流：父 → 子（子组件不能直接修改props）
- 可以指定类型和默认值
- 使用前需要在子组件中声明
声明Props
// 子组件中
export default {
props: {
// 基本类型声明
title: String,
// 带默认值
count: {
type: Number,
default: 0
}
}
}
export default {
props: {
// 基本类型声明
title: String,
// 带默认值
count: {
type: Number,
default: 0
}
}
}
使用Props
// 父组件模板中
<ChildComponent
:title=”parentTitle”
:count=”parentCount”
/>
<ChildComponent
:title=”parentTitle”
:count=”parentCount”
/>
Props数据流
父组件
数据源
数据源
→
子组件
接收props
接收props
3. 自定义事件
子组件通过触发自定义事件与父组件通信。就像孩子告诉家长发生了什么。
事件流程：
- 子组件中：使用
$emit触发事件 - 父组件中：使用
v-on监听事件
子组件触发事件
// 子组件方法中
methods: {
handleClick() {
this.$emit(‘custom-event’, data);
}
}
methods: {
handleClick() {
this.$emit(‘custom-event’, data);
}
}
父组件监听事件
<ChildComponent
@custom-event=”handleCustomEvent”
/>
methods: {
handleCustomEvent(data) {
// 处理来自子组件的数据
}
}
@custom-event=”handleCustomEvent”
/>
methods: {
handleCustomEvent(data) {
// 处理来自子组件的数据
}
}
事件通信
子组件
触发事件
触发事件
→
父组件
监听处理
监听处理
4. 插槽 (Slots)
插槽允许你将内容分发到组件的指定位置。就像预留位置让使用者填充自定义内容。
插槽类型：
- 默认插槽：没有名字的基础插槽
- 具名插槽：有名称的插槽
- 作用域插槽：可以传递数据的插槽
默认插槽
// 子组件中
<div class=”container”>
<slot></slot> <!– 内容插入点 –>
</div>
// 父组件中使用
<ChildComponent>
<p>这里的内容会显示在插槽位置</p>
</ChildComponent>
<div class=”container”>
<slot></slot> <!– 内容插入点 –>
</div>
// 父组件中使用
<ChildComponent>
<p>这里的内容会显示在插槽位置</p>
</ChildComponent>
具名插槽
// 子组件中
<div class=”container”>
<slot name=”header”></slot>
<slot name=”content”></slot>
<slot name=”footer”></slot>
</div>
// 父组件中使用
<ChildComponent>
<template v-slot:header>
<h1>标题内容</h1>
</template>
<template v-slot:content>
<p>主体内容</p>
</template>
</ChildComponent>
<div class=”container”>
<slot name=”header”></slot>
<slot name=”content”></slot>
<slot name=”footer”></slot>
</div>
// 父组件中使用
<ChildComponent>
<template v-slot:header>
<h1>标题内容</h1>
</template>
<template v-slot:content>
<p>主体内容</p>
</template>
</ChildComponent>
插槽示意图
header插槽
content插槽
footer插槽
5. 生命周期钩子
组件从创建到销毁的整个过程称为生命周期，Vue提供特殊的函数（钩子）让你在关键时刻执行代码。
创建前
(beforeCreate)
(beforeCreate)
创建完成
(created)
(created)
挂载前
(beforeMount)
(beforeMount)
挂载完成
(mounted)
(mounted)
更新前
(beforeUpdate)
(beforeUpdate)
更新完成
(updated)
(updated)
卸载前
(beforeUnmount)
(beforeUnmount)
卸载完成
(unmounted)
(unmounted)
常用生命周期钩子
- created：组件实例创建完成，但尚未挂载到DOM（适合初始化数据）
- mounted：组件已挂载到DOM（适合访问DOM、调用API）
- updated：数据更新导致DOM重新渲染后
- unmounted：组件被卸载后（适合清理定时器、取消事件监听）
使用示例
export default {
created() {
console.log(‘组件创建完成’);
},
mounted() {
console.log(‘组件已挂载到DOM’);
},
unmounted() {
console.log(‘组件已被卸载’);
}
}
created() {
console.log(‘组件创建完成’);
},
mounted() {
console.log(‘组件已挂载到DOM’);
},
unmounted() {
console.log(‘组件已被卸载’);
}
}
6. 组合式API (Composition API)
Vue3新增的组合式API让你更好地组织和复用代码逻辑。
为什么需要组合式API？
- 解决选项式API中逻辑分散的问题
- 更好地组织和复用逻辑
- 更灵活的函数式编程
setup() 函数
组合式API的入口点，在组件创建之前执行
export default {
setup() {
// 这里声明响应式数据和方法
return {
// 返回模板中需要使用的数据和方法
}
}
}
setup() {
// 这里声明响应式数据和方法
return {
// 返回模板中需要使用的数据和方法
}
}
}
响应式函数
- ref()：创建响应式的基本类型数据
- reactive()：创建响应式的对象
- computed()：创建计算属性
- watch()：监听响应式数据变化
import { ref, reactive, computed, watch } from ‘vue’;
setup() {
const count = ref(0); // 响应式数字
const user = reactive({ name: ‘张三’, age: 25 }); // 响应式对象
const doubleCount = computed(() => count.value * 2);
watch(count, (newValue, oldValue) => {
console.log(`count从${oldValue}变为${newValue}`);
});
return { count, user, doubleCount };
}
setup() {
const count = ref(0); // 响应式数字
const user = reactive({ name: ‘张三’, age: 25 }); // 响应式对象
const doubleCount = computed(() => count.value * 2);
watch(count, (newValue, oldValue) => {
console.log(`count从${oldValue}变为${newValue}`);
});
return { count, user, doubleCount };
}