Vue 组件基础实战从通信原理到综合应用组件是 Vue 开发的核心。把页面拆成一个个独立、可复用的组件代码才能清晰、好维护。而组件一旦拆分组件之间如何通信就成了最关键的问题。这篇博客带你从 0 掌握 Vue3 组件通信的四种核心方式Props、Emit、v-model、Slots。一、什么是 Vue 组件组件就是把页面上的一个完整功能区域比如一个卡片、一个输入框、一个计数器封装成一个独立的模块包含自己的结构template、逻辑script、样式style。页面 组件1 组件2 组件3 ...拆分的两大好处复用同一个卡片可以在多个页面重复使用解耦每个组件只负责自己的事出了问题只改一个地方。基础示例最简单 HelloWorld 组件我们先演示组件的创建、注册引入理解组件基础定义。!-- 子组件 HelloWorld.vue -- template div classhello h2Hello Vue Component/h2 /div /template script setup // script setup语法下无需手动注册组件引入即可使用 /script style scoped .hello{ color:#42b983; } /style!-- App.vue 父组件引入使用 -- template HelloWorld / /template script setup // 导入子组件 import HelloWorld from ./components/HelloWorld.vue /script说明Vue3script setup语法只需要 import 导入组件模板内直接写标签就可以使用简化了组件注册步骤。二、组件通信第一式Props父传子作用父组件向子组件传递数据。特点单向数据流数据只能父→子子组件不能直接修改 props。!-- 子组件 Child.vue -- script setup defineProps({ title: { type: String, default: 默认标题 }, age: { type: Number, required: true } }) /script template div h3{{ title }}/h3 p年龄{{ age }}/p /div /template!-- 父组件 -- template Child title张三的卡片 :age20 / /template script setup import Child from ./components/Child.vue /script要点defineProps声明要接收的数据支持type类型校验、required必填、default默认值子组件不要直接修改 props想改数据先拷贝一份本地变量。三、组件通信第二式Emit子传父作用子组件发生交互点击、输入时触发事件把数据上报给父组件由父组件更新数据。!-- 子组件 Counter.vue -- script setup import { ref } from vue const count ref(0) const emit defineEmits([change, reset]) function add() { count.value emit(change, count.value) // 把新值传给父组件 } function resetBtn() { emit(reset) } /script template div p当前值{{ count }}/p button clickadd加1/button button clickresetBtn重置/button /div /template!-- 父组件 App.vue -- script setup import { ref } from vue import Counter from ./components/Counter.vue const value ref(0) const counterKey ref(0) function onChange(val) { value.value val } function onReset() { counterKey.value 1; value.value 0 } /script template Counter :keycounterKey changeonChange resetonReset / p父组件接收到的值{{ value }}/p /template要点defineEmits声明自定义事件emit(事件名, 数据)触发事件并传参父组件用事件名回调监听接收。在此处插入图片Emit 计数器运行效果图】四、组件通信第三式v-model双向绑定语法糖本质v-model 是Props Emit的语法糖底层依赖两个要素props负责接收数据emit负责发出变更。!-- 语法等价关系 -- CustomInput v-modelmessage / !-- 等价于 -- CustomInput :modelValuemessage update:modelValuemessage $event /!-- 子组件 CustomInput.vue -- script setup const props defineProps({ modelValue: { type: String, default: }, placeholder: { type: String, default: 请输入内容 } }) const emit defineEmits([update:modelValue]) function onInput(e) { emit(update:modelValue, e.target.value) } function clear() { emit(update:modelValue, ) } /script template div input :valuemodelValue :placeholderplaceholder inputonInput / button v-ifmodelValue clickclear清空/button /div /template!-- 父组件 -- script setup import { ref } from vue import CustomInput from ./components/CustomInput.vue const message ref() /script template CustomInput v-modelmessage placeholder请输入内容 / p实时显示{{ message }}/p /template要点输入框这类 “父传值、子上报新值” 的固定场景用 v-model 能省掉手写属性和事件的重复代码。五、组件通信第四式Slots插槽结构复用作用Props 传的是数据插槽传的是HTML 模板结构让容器类组件卡片、弹窗的内容区域由父组件自由定义。插槽分为三类1. 默认插槽含后备内容!-- 子组件父不传内容时显示暂无内容 -- template slot暂无内容/slot /template2. 具名插槽划分多个区域!-- 子组件 -- template div classcard-headerslot nameheader默认标题/slot/div div classcard-footerslot namefooter/slot/div /template !-- 父组件 -- template CardBox template #header自定义标题/template template #footerbutton操作按钮/button/template /CardBox /template3. 作用域插槽子向插槽模板传数据特殊性普通插槽模板在父组件作用域编译只能访问父的数据作用域插槽可以让父组件编写的模板读取到子组件内部的数据。!-- 子组件把showLineCount绑定到slot上传给父 -- template slot :showLineCount3暂无内容/slot /template !-- 父组件通过 #defaultslotProps 接收子组件的数据 -- template CardBox template #defaultslotProps p内容共 {{ slotProps.showLineCount }} 行/p /template /CardBox /template六、通信方案怎么选表格场景方案父给子传展示数据Props子交互通知父、回传数据Emit自定义输入类组件双向交互v-model传 HTML 结构、自定义容器内容Slots 插槽选型原则能用简单方案就不用复杂方案尽量保持单向数据流数据修改权归数据持有者子组件只负责展示和触发事件数据变更交给父组件。七、综合实战做一个通用卡片组件把前面学到的知识串起来 —— 用插槽做结构复用用作用域插槽共享数据!-- CardBox.vue 通用卡片组件 -- template div classcard-box div classcard-headerslot nameheader默认标题/slot/div div classcard-contentslot :showLineCountshowLineCount暂无内容/slot/div div classcard-footerslot namefooter/slot/div /div /template script setup defineProps({ showLineCount: { type: Number, default: 3 } }) /script style scoped .card-box { border: 1px solid #ddd; border-radius: 12px; padding: 16px; width: 320px; } .card-header { font-weight: bold; color: #6a3ab2; border-bottom: 2px solid #f3e8ff; padding-bottom: 8px; } .card-content { min-height: 60px; } .card-footer { margin-top: 12px; text-align: right; } /style!-- App.vue 展示两张不同内容的卡片 -- template CardBox template #header今日新闻/template template #defaultslotProps p今天发布了三款新产品。/p span内容共 {{ slotProps.showLineCount }} 行/span /template template #footerbutton查看更多/button/template /CardBox CardBox template #header推荐商品/template template #footerbutton加入购物车/button/template /CardBox /template八、总结表格通信方式数据方向核心痛点使用场景Props父→子父组件数据下发展示传递普通数据Emit子→父子交互结果上报按钮点击、删除等v-model双向语法糖简化传值 更新重复代码自定义输入组件Slots父→子传结构容器组件结构复用卡片、弹窗等一句话记住Props 传数据、Emit 报变更、v-model 简化双向绑定、Slots 传结构作用域插槽让父模板还能拿到子组件的数据。学习心得Vue3 组件化开发是前端工程化的核心思想script setup语法简化了组件编写与导入流程。组件通信是开发中最常用的知识点Props 实现父传子Emit 实现子向父发送事件v-model 是二者的语法糖插槽则用来传递 HTML 结构而不是普通变量。在开发时要遵循单向数据流原则不要直接修改 props把数据修改权限交给数据所在的组件减少代码 bug。通过本次案例练习我掌握了组件定义、注册和四种主流通信方式能够独立开发简单的可复用组件