HoRain 云小助手个人主页⛺️生活的理想就是为了理想的生活!⛳️ 推荐前些天发现了一个超棒的服务器购买网站性价比超高大内存超划算忍不住分享一下给大家。点击跳转到网站。目录⛳️ 推荐Vue3 组件从基础到进阶的全面指南一、组件基础概念二、组件注册方式1. 局部注册2. 全局注册三、组件通信方式1. 父子组件通信Props/Emits2. 祖先-后代组件通信Provide/Inject四、组件生命周期常用生命周期钩子script setup 语法五、组件封装最佳实践1. 组件封装核心原则2. Props 透传模式通用按钮组件示例六、高级组件用法1. 动态组件2. 缓存组件状态七、TypeScript 与 Vue3 组件八、组件命名规范总结Vue3 组件从基础到进阶的全面指南Vue3 的组件系统是构建现代 Web 应用的核心它提供了强大的封装能力、灵活的通信方式和高效的性能。以下是对 Vue3 组件的全面概述一、组件基础概念Vue组件是一个拥有独立模板、逻辑和样式的可复用代码单元。组件的核心价值包括复用性一次定义多处使用避免重复代码隔离性组件内部的逻辑和样式不会污染外部降低耦合度可维护性单个组件职责单一便于调试和迭代协作效率团队可按组件分工开发提高并行效率二、组件注册方式1. 局部注册在需要使用组件的文件中导入并注册!-- 在 App.vue 中 -- script setup import Button from ./components/Button.vue /script template Button / /template2. 全局注册在 main.js 中注册import { createApp } from vue import App from ./App.vue import Button from ./components/Button.vue const app createApp(App) app.component(Button, Button) // 全局注册组件 app.mount(#app)三、组件通信方式1. 父子组件通信Props/Emits父传子Props父组件通过 props 向子组件传递数据子传父Emits子组件通过 emit 向父组件发送事件!-- 父组件 -- Child :messageparentMsg updatehandleUpdate / !-- 子组件 -- script setup defineProps({ message: String }) const emit defineEmits([update]) /script注意遵循单向数据流原则子组件不应直接修改父组件传递的 props2. 祖先-后代组件通信Provide/Inject!-- 祖先组件 -- script setup import { provide } from vue provide(theme, dark) /script !-- 后代组件 -- script setup import { inject } from vue const theme inject(theme, light) /script四、组件生命周期Vue3 组件生命周期包括四个阶段创建阶段创建响应式数据挂载阶段渲染模板更新阶段修改数据更新视图卸载阶段卸载组件常用生命周期钩子script setup 语法import { onMounted, onUpdated, onUnmounted } from vue onMounted(() { console.log(组件已挂载) }) onUpdated(() { console.log(组件已更新) }) onUnmounted(() { console.log(组件已卸载) })五、组件封装最佳实践1. 组件封装核心原则单一职责原则每个组件只负责一个明确的功能开放封闭原则对扩展开放对修改封闭可组合性组件易于与其他组件组合使用2. Props 透传模式通用按钮组件示例!-- BaseButton.vue -- template button :classbuttonClasses v-bind$attrs clickhandleClick slot / /button /template script setup import { computed } from vue const props defineProps({ variant: { type: String, default: primary, validator: value [primary, secondary, danger, ghost].includes(value) }, size: { type: String, default: medium, validator: value [small, medium, large].includes(value) }, block: { type: Boolean, default: false }, disabled: { type: Boolean, default: false } }) const emit defineEmits([click]) const buttonClasses computed(() [ btn, btn--${props.variant}, btn--${props.size}, { btn--block: props.block, btn--disabled: props.disabled } ]) const handleClick (event) { if (!props.disabled) { emit(click, event) } } /script六、高级组件用法1. 动态组件component :iscurrentView :titlecomponentTitle /2. 缓存组件状态keep-alive :includecachedComponents component :iscurrentComponent / /keep-alive七、TypeScript 与 Vue3 组件使用 TypeScript 可以让组件更加规范、稳健// 定义 Props 类型 interface ButtonProps { variant: primary | secondary | danger | ghost size: small | medium | large block: boolean disabled: boolean } const props definePropsButtonProps()八、组件命名规范大驼峰命名MyPanel烤串法命名my-panel总结Vue3 组件系统通过合理的封装、通信和生命周期管理使得构建大型应用变得高效且可维护。掌握组件设计原则和最佳实践能显著提升开发效率和代码质量。记住一次封装多处复用这是组件化开发的核心价值。如需更深入的了解建议参考 Vue3 官方文档和相关实践案例持续优化你的组件设计能力。❤️❤️❤️本人水平有限如有纰漏欢迎各位大佬评论批评指正如果觉得这篇文对你有帮助的话也请给个点赞、收藏下吧非常感谢! Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧