Vue 组件基础实战从通信原理到综合应用标签vue3前端组件化propsemit简介本文结合 Vue3 单文件组件讲解组件核心概念、项目搭建、父子组件通信原理附带完整可运行案例适合前端初学者学习。Vue组件基础实战从通信原理到综合应用一、组件是什么组件是Vue开发的核心思想组件就是页面上独立、可复用的一块UI和逻辑。Vue3使用单文件组件SFC后缀名为.vue一个文件分为三部分template编写页面结构htmlscript setup编写业务逻辑jsVue3推荐setup语法糖style编写样式添加scoped可以实现样式隔离不会污染其他组件配图1VSCode项目目录截图展示src/components文件夹体现组件文件存放位置。组件化开发优势复用相同UI多处页面直接引用不用重复写代码易维护每个组件只负责自己这一块功能修改不影响其他页面便于分工多人协作可以分开开发不同组件二、Vue3项目创建过程使用官方脚手架 create-vue 创建项目终端输入命令npmcreate vuelatest 项目配置选项 - 项目名称my-app-vue - 是否使用 TypeScript否 - 是否使用 JSX否 - 是否添加 Vue Router是 - 是否添加 Pinia 状态管理是 - 测试框架否 - Prettier 代码格式化是 - 试验特性全部不勾选 - 是否跳过示例代码No保留示例方便学习 项目生成完成依次执行命令安装依赖并启动项目cdmy-app-vuenpminstallnpmrun dev 浏览器访问http://localhost:5173/项目启动成功。## 三、实战案例父子组件通信组件之间最常用两种通信方式1. props父组件 → 子组件向下传递数据单向数据流2. emit 自定义事件子组件 → 父组件向上传递数据1. 创建子组件 src/components/CardDemo.vuetemplatedivclasscardh2{{cardTitle}}/h2p{{cardDesc}}/pbutton clicksendMsg向父组件发送消息/button/div/templatescript setup// 接收父组件传过来的数据 const propsdefineProps({cardTitle: String, cardDesc: String})// 声明自定义事件用于向父组件传值 const emitdefineEmits([childSend])const sendMsg(){// 触发事件携带参数传给父组件 emit(childSend,子组件我是来自卡片组件的消息)}/scriptstyle scoped.card{border: 1px solid#42b983;padding: 20px;border-radius:10px;width:350px;}/style2. 父组件 src/App.vue引入并使用 CardDemo 子组件templatedivclassapph1父组件页面/h1!-- 使用子组件props传值监听子组件自定义事件 --CardDemocardTitleVue组件学习cardDesc父子通信案例演示childSendreceiveMsg/pstylemargin-top:20px;收到子组件消息{{message}}/p/div/templatescript setup// 导入子组件importCardDemo from./components/CardDemo.vueimport{ref}fromvue// 定义变量接收子组件传来的数据 const messageref(暂无消息)const receiveMsg(val){message.valueval}/scriptstyle.app{padding:30px;}/style配图2浏览器页面运行截图。页面展示卡片组件点击按钮后下方文字更新演示通信效果。## 四、核心知识点讲解1. props父传子 父组件在组件标签上写自定义属性子组件通过defineProps接收。 ⚠️ 单向数据流原则**子组件不能直接修改 props 里面的值**只能读取。如果需要修改要复制到子组件本地变量。2. emit 自定义事件子传父 子组件先用defineEmits声明事件名称调用emit(事件名,参数)发送数据 父组件通过事件名监听拿到子组件传递过来的数据。3. style scoped 加上scoped后样式只作用于当前组件内部 DOM。底层原理Vue 自动给 DOM 添加唯一属性CSS 增加属性选择器防止全局样式互相污染。## 五、开发常见问题1. 使用组件前必须import导入否则页面报错找不到组件2. props 不能直接修改是单向数据流3. scoped 只能隔离样式父组件样式无法直接修改子组件内部元素4. emit 事件名称建议使用小驼峰或者短横线命名保持统一规范## 六、总结组件化是 Vue 最重要的思想。本次实战掌握了单文件组件结构、项目搭建、父子组件通信的两种基础方式 props 和 emit。理解组件通信就可以拆分页面搭建出结构清晰、可复用的前端页面。后续可以继续学习插槽 slot、组件生命周期等进阶知识。