Vue 组件基础实战：从通信原理到综合应用）
标签：
vue3前端组件化propsemit
简介：本文结合 Vue3 单文件组件，讲解组件核心概念、项目搭建、父子组件通信原理，附带完整可运行案例，适合前端初学者学习。`
Vue组件基础实战：从通信原理到综合应用
一、组件是什么
组件是Vue开发的核心思想，组件就是页面上独立、可复用的一块UI和逻辑。
Vue3使用单文件组件SFC，后缀名为.vue，一个文件分为三部分：
<template>：编写页面结构（html）<script setup>：编写业务逻辑（js，Vue3推荐setup语法糖）<style>：编写样式，添加scoped可以实现样式隔离，不会污染其他组件
配图1：VSCode项目目录截图，展示src/components文件夹，体现组件文件存放位置。
组件化开发优势：
- 复用：相同UI多处页面直接引用，不用重复写代码
- 易维护：每个组件只负责自己这一块功能，修改不影响其他页面
- 便于分工：多人协作可以分开开发不同组件
二、Vue3项目创建过程
使用官方脚手架 create-vue 创建项目，终端输入命令：
npmcreate vue@latest 项目配置选项： - 项目名称：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.vue<template><divclass="card"><h2>{{cardTitle}}</h2><p>{{cardDesc}}</p><button @click="sendMsg">向父组件发送消息</button></div></template><script setup>// 接收父组件传过来的数据 const props=defineProps({cardTitle: String, cardDesc: String})// 声明自定义事件，用于向父组件传值 const emit=defineEmits(['childSend'])const sendMsg=()=>{// 触发事件，携带参数传给父组件 emit('childSend','子组件：我是来自卡片组件的消息')}</script><style scoped>.card{border: 1px solid#42b983;padding: 20px;border-radius:10px;width:350px;}</style>2. 父组件 src/App.vue，引入并使用 CardDemo 子组件<template><divclass="app"><h1>父组件页面</h1><!-- 使用子组件，props传值，监听子组件自定义事件 --><CardDemocardTitle="Vue组件学习"cardDesc="父子通信案例演示"@childSend="receiveMsg"/><pstyle="margin-top:20px;">收到子组件消息：{{message}}</p></div></template><script setup>// 导入子组件importCardDemo from'./components/CardDemo.vue'import{ref}from'vue'// 定义变量接收子组件传来的数据 const message=ref('暂无消息')const receiveMsg=(val)=>{message.value=val}</script><style>.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、组件生命周期等进阶知识。