Spring Boot+Vue全栈应用开发实践 课件20 Vue 组件化开发

罗荣良Vue组件化开发本节学习目标1.理解组件化的核心思想(UI=f(state))2.掌握组件的定义与引用3.重点：父子组件通信(Props&Emits)4.理解组件插槽(Slots)的作用5.掌握核心生命周期钩子(onMounted)为什么要组件化？传统模式：一个HTML文件3000行，维护噩梦。组件化模式：页面拆分成Header,Sidebar,Main,Footer。优势：复用性高、可维护性强、协同开发容易。组件树(ComponentTree)树状结构图：App(Root)├──Header├──Sidebar│

└──MenuList└──Content├──Article└──Comment定义：创建一个.vue文件(如MyButton.vue)。引入：importMyButtonfrom'./MyButton.vue'使用：<MyButton/>Vue3特性：<scriptsetup>中引入即可直接使用，无需注册。定义与使用组件主件通信全景图核心原则：单向数据流。⬇️Props(下行)：父组件把数据传给子组件。⬆️Events(上行)：子组件发送事件通知父组件。这是一个闭环。父传子：Props基础场景：父组件要告诉按钮组件显示什么文字。父代码：<MyButtontitle="提交"color="blue"/>子代码：defineProps(['title','color'])Props的进阶用法在真实开发中，我们建议使用对象形式来定义Props，这样可以进行类型校验。注意：Props是只读的，子组件不能直接修改它！子传父：Emits基础场景：子组件被点击了，要告诉父组件。子代码：constemit=defineEmits(['add'])<button@click="emit('add')">Emits实战交互父组件监听：<MyButton@add="handleAdd"/>consthandleAdd=()=>{count.value++}流程：点击->触发emit->父组件监听到->执行父组件逻辑。痛点：Props只能传数据，我想传一段HTML结构怎么办？解决：Slot(挖坑与填坑)。类比：相框(组件)和照片(Slot内容)。组件插槽(Slots)Slots代码演示子组件(Card.vue)：

父组件：主件生命周期组件也是有生老病死的。创建(Creation)->挂载(Mounting)->更新(Updating)->销毁(Unmounting)。Vue3常用钩子：onMounted,onUnmounted。时机：组件挂载到DOM之后。用途：1.发送网络请求(Axios)。2.操作DOM元素(如初始化ECharts图表)。代码：onMounted(()=>{console.log('Ready!')})核心钩子：onMounted实战案例：封装一个NavBar

需求：封装一个通用的顶部导航栏。Props:title(标题),showBack(是否显示返回键)Emits:back(点击返回键触发)Slot:右侧自定义按钮区域。本节小结与作业小结：Props(下),Emits(上),Slots(内),onMounted