Vue企业开发实战（第2版）-课件 项目7 组件详解

《Vue企业开发实战》·Vue3企业级项目教程项目7组件详解任务1复用·任务2props·任务3通信·任务4slot授课教师：XXX可复用组件·单向数据流·defineEmits·插槽学习目标能交出带props/emits/slot的可复用组件01会拆会复用抽出列表项或标题栏，改一处两处一起变02会传数据defineProps数组/对象写法，遵守单向数据流03会回传defineEmits通知父级；兄弟经父级中转04会留洞匿名slot与具名slot，让父填结构05三件套收口一个组件上props+emit+slot都有，两处父页面用法不同项目知识导图四个任务：拆开→传入→回传→留洞任务1概念与复用聊天框痛点；列表项抽成组件任务2props父传子，动态更新，单向数据流任务3组件通信自定义事件；兄弟经父级任务4slot匿名与具名，定制中间区域项目导读复制三遍标题栏，改文案要改三次组件是Vue的核心能力：把结构、样式和逻辑封装成可复用模块。本项目接到大觅标题栏和票务卡片。跨很多层的全局数据留到项目9的Pinia；父子仍优先props/emit。拆会出现第二次的块就抽。传一个值用props。回子通知父用事件。填一段结构用slot。TASK01组件概念与复用01为什么拆02怎么挂03大觅可抽模块7.1.1为什么使用组件先看一个聊天框：关闭、输入、发送，以后每个页都要同样的输入框图7.1关闭、输入、发送，拆成可复用块复制粘贴的代价•统一加校验、支持回车——漏改一处就出bug•组件：结构、样式、逻辑封在一起，多处使用•一个人改卡片，另一人改页面•传统div/input能摆出来，但没有统一数据接口7.1.2复用步骤大觅列表每一项结构和样式高度相似，只是数据不同把列表项抽成独立组件。样式或交互一变，只改组件本身。页面级负责取数和异常；子组件专注展示和局部交互。//components/AppHeader.vue<template><header>大觅</header></template>importAppHeaderfrom'@/components/AppHeader.vue'<AppHeader/><AppHeader/>图7.2地址抽成地图子组件拆分边界先问会不会再出现，再动手01该拆两页以上会用，或同一页用两次：顶栏、票卡、底栏。02先不拆只出现一次、还在改结构的草稿区。03拆太大把整页塞进一个组件，父页面没有了，反而难读。04拆太碎一行字一个组件，props比内容还长。上机1抽出并复用先问：会不会在别的页再出现要求•抽出标题栏或票务卡片•至少两处使用•改子组件一处文案或样式，两处齐变•指出template/script/style仍在这个.vue里•本步可以先写死标题，下节再改成props合格两处外观一致且来自同一文件。复制了两份组件文件不算过。TASK02使用props传递数据01defineProps02动态更新03单向数据流7.2.1props是对外数据接口父组件在标签上绑属性，子组件defineProps接收数组写法：快速声明名字。对象写法：再写类型、默认值、必填。本任务示例先用数组写法把流程走通。<!--父：列表页示例1-->importListItemfrom'@/components/ticketlist/listitem'constmessage='来自列表页的数据'<ListItem:message="message"/><!--子：示例2-->defineProps(['message'])<p>{{message}}</p>图7.3子组件显示父传入的message示例3响应式数据会自动同步父改listdata，子的props跟着变<button@click="changeData">改变数据</button><ListItem:message="listdata"/>import{ref}from'vue'constlistdata=ref('')constchangeData=()=>{listdata.value='单击按钮之后的数据'}//子组件仍是defineProps(['message'])//初始为空，点按钮后子组件显示出新字符串图7.4初始为空图7.5单击后props同步对象写法：类型、必填、默认值不是每一项都requiredconstprops=defineProps({title:{type:String,required:true},price:Number,showBack:{type:Boolean,default:true}})<AppHeadertitle="演出详情"/><TicketCard:title="item.title":price="item.price"/>课上约定•新组件尽量对象写法•详情要返回，首页可以showBack=false•布尔默认true时别传字符串•模板用props.title或直接title都可以•数组写法留给最小示例7.2.2单向数据流父→子可以；子不能直接改props01可以子组件用props显示；父改数据，子自动更新。02不行在子组件里props.title='x'。会警告，也破坏数据源。03要本地改用ref接一份初始值，只改自己的副本，不要写回props。04要改回去发自定义事件，让父改数据。下一任务展开。上机2移动端标题栏左侧返回，中间标题来自props要求•声明title等props（建议对象写法）•两处父页面传入不同title•切换页面标题不同且来自传入值•故意在子里改props看警告，再改回只读•不要把字写死在子组件里合格标题随传入值变。写死在子组件、或子组件直接改props，不算过。TASK03组件通信01自定义事件02兄弟怎么同步7.3通信不止父传子子向父、兄弟同步，都要有明确接口返回逻辑通常在父级：子只负责“点了返回”，父知道当前在详情还是选座，决定back还是去支付。子组件里写死router.push路径会难复用。图7.8props向下，$emit向上，兄弟经父中转•父→子：props•子→父：defineEmits•兄↔弟：共同父级•全局状态等到项目9的Pinia7.3.1defineEmits声明emit('change',val)；父用@change监听<!--父示例6--><p>子组件传递的数据:{{message}}</p><Child@change="getVal"/>constmessage=ref('')constgetVal=(val)=>{message.value=val}<!--子示例7-->constemit=defineEmits(['change'])//推荐显式声明constcMsg='child要传递的信息'constfn=()=>{emit('change',cMsg)}<button@click="fn">单击子组件传值父组件</button>图7.9初始图7.10单击后父组件收到值7.3.2兄弟：父握一份数组件1的数量要在组件2里展示，经父中转<!--父示例8--><p>{{message}}</p><ChildOne@change="getVal"/><ChildTwo:count="message"/>constmessage=ref(0)constgetVal=(val)=>{message.value=val}<!--子1：emit('change',新数量)--><!--子2：defineProps(['count'])只展示-->图7.11初始图7.12兄→父→弟列表里的卡片怎么买v-for出多张卡，每张自己emit，父用同一个goPayfunctiongoPay(id){router.push({path:'/seat',query:{id}})}<TicketCardv-for="iteminlist":key="item.id":title="item.title"@buy="goPay"/>标题栏：@back="router.back()"。载荷未传、事件名写错是常见坑。这是列表指令和组件的交接。上机3：标题栏返回emit由父处理；卡片把id传给父；可选两个子组件经父显示同一选中项。TASK04slot分发内容01是什么02匿名03具名7.4.1slot是什么父向子指定位置填内容：一个值用props，一段结构用slot01洞子组件预留<slot>，像一块空。02填父在标签中间写入按钮、图标、一段HTML。03默认父不传时，slot里的默认内容会显示。04和props标题字符串用props；右侧有时搜索有时分享，用slot。7.4.2匿名slot默认那一个洞，先会这一种<!--子popup/AppHeader--><header><slot>默认标题</slot></header><!--父示例12--><AppHeader>演出详情</AppHeader><Popup><p>确定要离开选座页吗？</p><button>确定</button></Popup>图7.13匿名slot7.4.3具名slot左中右不要串位，靠name对上#right<header><slotname="left"/><slot/><slotname="right"/></header><AppHeader><template#left>返回</template>演出详情<template#right><Search/></template></AppHeader>图7.14具名slot：左/中/右对上作业方向：数量同步父握count，子只展示和发事件——单向数据流的验收//子defineProps({count:Number})constemit=defineEmits(['inc','dec'])<button@click="emit('dec')">-</button><span>{{count}}</span><button@click="emit('inc')">+</button>//父<Counter:count="n"@inc="n++"@dec="n--"/>图7.15数量控制器：子emit，父改count上机4可定制布局项目7综合达标：props+emit+slot要求•改造标题栏或卡片：中间或右侧用slot•两处父页面插入不同内容•综合检查三件套都在•用props与自定义事件完成数量更新与显示同步•name写错、忘记v-slot会串位合格一个可复用组件上三样都有，两处父页面用法不同。子组件直接改count不算过。基于props做本地副本（示例4/5）要改展示用的值，拷一份ref，不要写回props<!--父把初始count传下来--><Child:count="start"/><!--子-->constprops=defineProps({count:Number})constlocal=ref(props.count)functioninc(){local.value++}<span>{{local}}</span>//这样只改自己的副本//若要和父同步，仍应emit，不要props.count