《通信软件前端开发》课件-17.Vue3组件通信之父子组件传值

《通信软件前端开发》Vue3组件通信之父子组件传值案例导入：父子组件如何通信？场景：用户信息管理系统父组件（UserProfile）：维护核心数据与编辑状态子组件（UserCard）：展示信息并提供“编辑”按钮交互目标：点击子组件按钮，触发父组件弹窗核心问题：数据与事件的流转数据传递（Props）：子组件如何获取父组件数据？事件传递（Emits）：子组件如何通知父组件操作？核心主题掌握父子组件间的数据传递（Props）与事件通信（Emits）机制，实现高效交互。知识讲解：Props父传子详解<!--绑定数据传递给子组件--><ChildComponent:message="parentMsg":count="parentCount"/><scriptsetup>import{ref}from'vue'constparentMsg=ref('HellofromParent')constparentCount=ref(10)</script>代码实现示例——Parent.vue(父组件)<template><p>消息:{{message}}</p><p>计数:{{count}}</p></template><scriptsetup>constprops=defineProps({message:String,count:Number})</script>代码实现示例——ChildComponent.vue(子组件)核心定义父组件传递给子组件数据的自定义属性，是实现“父传子”的核心手段。核心语法父组件使用v-bind(:)绑定属性；子组件使用defineProps宏声明接收。单向数据流Props是只读的，子组件不应直接修改，体现Vue单向数据流原则。知识讲解：Props的响应性与类型验证响应性机制父组件数据更新时，子组件视图自动更新，保持状态同步。这是Vue响应式系统的核心特性之一。TypeScript类型验证结合TS接口定义，确保数据类型正确。在开发阶段提前发现错误，提升代码健壮性。<scriptsetuplang="ts">//使用接口定义Props类型interfaceProps{title:string;items:string[];isVisible?:boolean;//可选属性}constprops=defineProps<Props>();</script>ChildComponent.vue知识讲解：Emits子传父详解核心机制子组件通过defineEmits声明事件，利用emit方法触发事件并传递数据；父组件通过v-on(@)监听事件并处理。<template><button@click="handleClick">点击触发</button></template><scriptsetuplang="ts">constemit=defineEmits(['child-clicked']);consthandleClick=()=>{emit('child-clicked','HellofromChild');};</script>子组件(ChildComponent.vue)<template><Child@child-clicked="handleChildClick"/></template><scriptsetuplang="ts">import{ref}from'vue';constmsg=ref('');consthandleChildClick=(msg)=>{msg.value=msg;};</script>父组件(Parent.vue)知识讲解：Emits的类型验证与事件参数类型验证(TypeValidation)支持TypeScript类型定义，为事件和参数定义严格规范。确保事件触发与监听的一致性，在开发阶段提前发现类型错误，提升代码健壮性。事件参数传递(Arguments)子组件通过emit方法的第二个及以后的参数传递数据，父组件的事件处理函数按顺序接收这些参数并进行处理，实现组件间的数据交互。interfaceEmits{(e:'update-count',value:number):void;(e:'send-msg',msg:string,t:Date):void;}constemit=defineEmits<Emits>();constupdate=()=>{emit('update-count',1);//类型必须是number}

实操教学：报警阈值设置实战（父组件）复杂对象传递(Props)父组件通过`:device`属性将选中的设备对象（包含id、name、status等）整体传递给子组件，实现复杂数据的同步展示。状态更新(Events)子组件通过`@status-changed`事件回传更新后的设备对象，父组件在`handleStatusChange`中更新数据源，实现列表状态同步。<!--父组件向子组件传递复杂对象--><DeviceDetailv-if="selectedDevice":device="selectedDevice"@status-changed="handleStatusChange"></DeviceDetail>

//模拟设备数据与状态constdevices=ref([{id:1,name:'传感器A',status:'online'}]);constselectedDevice=ref(null);

//处理子组件事件更新列表consthandleStatusChange=(dev)=>{constidx=devices.value.findIndex(d=>d.id===dev.id);if(idx!==-1)devices.value[idx]=dev;};DeviceList.vue(父组件)实操教学：报警阈值设置实战（子组件）Props接收复杂对象通过接口`Device`和`Props`定义接收复杂对象`device`，包含名称、位置、状态等属性，实现类型安全的父子数据传递。Emits发送对象事件点击按钮时，通过`emit`发送`status-changed`事件，并将更新后的`device`对象作为参数传递给父组件，实现复杂数据的回调。<template><divclass="device-detail"><h2>设备详情</h2><divclass="info"><p><strong>名称:</strong>{{}}</p><p><strong>位置:</strong>{{device.location}}</p><p><strong>状态:</strong>{{device.status}}</p></div><button@click="toggleStatus">切换状态</button></div></template><scriptsetuplang="ts">interfaceDevice{id:number;name:string;status:'online'|'offline';location:string;}interfaceProps{device:Device;}constprops=defineProps<Props>();constemit=defineEmits<{(e:'status-changed',d:Device):void}>();consttoggleStatus=()=>{emit('status-changed',{...props.device,status:props.device.status==='online'?'offline':'online'});};</script>DeviceDetail.vue简答题Props响应性原理简述Props的响应性原理，以及为什么子组件不应该直接修改Props？填空题子组件向父组件传值子组件向父组件发送事件时，需要使用______方法，并通过_____

宏声明要触发的事件。课堂小测选择题Vue3组件通信API在Vue3中子组件接收父组件传递的数据应该使用哪个API？defineEmitsdefinePropsprovideinject答案讲解Q1:子组件接收父组件Props的API答案：B(defineProps)解析：defineProps是Vue3中用于子组件声明接收父组件Props的API。defineEmits用于声明事件，provide和inject用于跨层级通信。Q2:子组件触发事件的方式答案：emit,defineEmits解析：子组件通过defineEmits宏声明要触发的事件列表，然后通过调用emit方法来实际触发事件并传递数据。Q3：Props响应性与单向数据流响应性原理：Props是响应式的，因为父组件传递的数据通常是ref或reactive包装的对象。父组件数据更新时，子组件会自动重新渲染。不可直接修改：遵循单向数据流原则，Props更新应由父组件发起。子组件应通过触发事件通知父组件修改数据，避免数据流向混乱。属性类型不符时会发生什么？如何在开发阶段自我检查此类错误？Props类型验证Emits事件名的命名规范是什么？父组件监听自定义事件时要注意哪些规范？Emits事件规范子组件需要修改父组件传递的复杂对象（如用户信息）。如何在Vue的规范下实现？修改复杂对象小组讨论请大家以小组为单位，结合实操经验，讨论以下问题数据管理中心维护用户信息对象（姓名、年龄、邮箱）维护编辑状态布尔值(isEditing)负责接收子组件传回的更新数据父组件(Parent)视图渲染与交互接收Props展示用户信息根据isEditing切换视图（按钮/表单）点击编辑触发事件，保存时传递新数据子组件(Child)单向数据流原则严格使用Props进行父传子严格使用Emits进行子传父禁止子组件直接修改父组件数据核心规范(Rules)课后作业：用户信息组件开发课程总结与回顾核心模式：单向数据流父子组件通信严格遵循“PropsDown,EventsUp”原则，确保数据流向清晰，避免