Vue框架應(yīng)用實(shí)戰(zhàn)項目式教程 課件 任務(wù)5 崗位信息異步渲染

1項目組件化設(shè)計任務(wù)5框架技術(shù)應(yīng)用組件是Vue中構(gòu)成頁面各部分的獨(dú)立結(jié)構(gòu)單元，能實(shí)現(xiàn)復(fù)雜的頁面結(jié)構(gòu)，提高代碼的復(fù)用性。在實(shí)際項目開發(fā)中，組件起著非常重要的作用。本任務(wù)帶領(lǐng)大家認(rèn)識在Vite環(huán)境中組件的注冊、引入，以及父子組件之間的傳值等技術(shù)，建立初步的工程項目化思維?！局R目標(biāo)】掌握組件的注冊和導(dǎo)入；熟練掌握父子組件間的傳值技術(shù)；掌握插槽的使用步驟?！炯寄苣繕?biāo)】能夠掌握利用組件技術(shù)拆分復(fù)雜頁面的能力；能夠熟練使用組件間的各項技術(shù)?！舅刭|(zhì)目標(biāo)】培養(yǎng)精益求精勇于創(chuàng)新的工匠精神；培養(yǎng)高效的團(tuán)隊合作精神。學(xué)習(xí)目標(biāo)任務(wù)5項目組件化設(shè)計項目背景到目前為止，本項目的大部分功能集中在一個App.vue文件中實(shí)現(xiàn)，顯然是有悖于“高耦合低內(nèi)聚”的軟件設(shè)計思想。組件的引入解決了這個問題。組件是構(gòu)成Vue項目的基本結(jié)構(gòu)單元，能夠減少重復(fù)代碼的編寫，提高開發(fā)效率，降低代碼間的耦合程度，使項目更易維護(hù)和管理。不同組件之間具有基本交互功能，能根據(jù)業(yè)務(wù)邏輯實(shí)現(xiàn)復(fù)雜的項目功能。本項目開發(fā)“就業(yè)職通車”網(wǎng)站的首頁功能，分成幾個組件構(gòu)成，每個組件執(zhí)行一個功能模塊，組件之間可以進(jìn)行通信，統(tǒng)一由App.vue進(jìn)行組織管理，提高制作復(fù)雜頁面的能力。任務(wù)規(guī)劃本任務(wù)要求將崗位列表和頁面標(biāo)題進(jìn)行分別的組件設(shè)計，通過使用父子組件間傳值技術(shù)進(jìn)行列表內(nèi)容和點(diǎn)贊數(shù)據(jù)的傳輸，使用插槽技術(shù)完成標(biāo)題的統(tǒng)一管理。任務(wù)5.1組件設(shè)計【任務(wù)陳述】本任務(wù)學(xué)習(xí)組件的創(chuàng)建、注冊及導(dǎo)入，并對最新崗位列表數(shù)據(jù)以組件形式重構(gòu)?！救蝿?wù)分析】該任務(wù)的具體實(shí)施流程如圖5-1所示。圖5-1任務(wù)實(shí)施流程圖任務(wù)5.1組件設(shè)計【任務(wù)實(shí)施】步驟一.創(chuàng)建子組件Comments.vue。將渲染最新崗位的代碼從App.vue中剝離，在src/components目錄內(nèi)新建子組件Comments.vue，提高代碼復(fù)用性。同時渲染最新崗位所用到的style、function和資源引用路徑(img標(biāo)簽)，也需要一并剝離。代碼如下：<!—Comments.vue子組件--><template> <divclass="d-flextext-mutedmb-3" v-for="(item,index)inmessageList"… …> …<imgsrc="../assets/img/support.png"alt="">//資源路徑修改</div></template><scriptsetup>functionparseTime(time){…}</script><stylescoped>.message_sum{}.suppoert{}.supportspan{}.supportActivedimg{}.img{}</style>但此時頁面還無法渲染Comments.vue組件，需要在父組件中導(dǎo)入和注冊。任務(wù)5.1組件設(shè)計【任務(wù)實(shí)施】步驟二.在App.vue中導(dǎo)入注冊子組件Comments.vue。<!—App.vue父組件--><scriptsetup>importCommentsfrom"../components/Comments.vue"</script><template><!--最新崗位列表--><divclass="py-5"> <Title>最新崗位</Title><Comments></Comments></div></template>保存后瀏覽器會報錯，原因是子組件的Comments.vue中的messageList數(shù)據(jù)并未獲取。任務(wù)5.1組件設(shè)計【任務(wù)實(shí)施】步驟三.通過props父組件向子組件傳遞數(shù)據(jù)。在App.vue中利用v-bind綁定來傳遞動態(tài)props值。<!—App.vue父組件--><Commentsv-bind:messageList="messageList.content"v-bind:avatar_male="avatar_male"v-bind:avatar_female="avatar_female"></Comments>在Comment.vue組件中使用defineProps方法在props列表上聲明傳遞的值和類型后，模板中就可以直接使用messageList、avatar_female和avatar_male三個數(shù)據(jù)。import{toRefs}from'vue'//接收父組件數(shù)據(jù)和方法constprops=defineProps({ messageList:Array, avatar_female:String, avatar_male:String})//toRefs方法可以將響應(yīng)式對象的每個屬性都轉(zhuǎn)化為ref對象const{messageList,avatar_female,avatar_male}=toRefs(props) 通過以上步驟，父組件數(shù)據(jù)傳遞到子組件中，順利完成數(shù)據(jù)的渲染。任務(wù)5.1組件設(shè)計【知識鏈接】5.1.1組件基礎(chǔ)組件（component）是一個具有獨(dú)立邏輯和功能的界面，不同組件之間又能根據(jù)規(guī)定的接口規(guī)則進(jìn)行相互通信。每個Web頁面的各個功能塊，比如頭部、導(dǎo)航、彈窗、列表、側(cè)邊欄、頁腳等都可以看成是一個個的組件，頁面只不過是這些組件的容器。組件示意圖如圖5-2所示。圖5-2組件示意圖任務(wù)5.1組件設(shè)計【知識鏈接】5.1.1組件基礎(chǔ)定義組件當(dāng)使用構(gòu)建工具時，我們一般會將Vue組件定義在一個單獨(dú)的

.vue

文件中，也稱之為單文件組件

(SingleFileCcomponent，簡稱SFC)，存放在src/components目錄內(nèi)?！纠?-1】組件案例。在src/components目錄內(nèi)創(chuàng)建一個計數(shù)器組件ButtonCounter.vue，代碼如下所示。<template> <button@click="count++">點(diǎn)擊了{(lán){count}}次</button></template><scriptsetup> import{ref}from'vue' constcount=ref(0)</script><stylescoped>.red{ color:red;}</style>從以上代碼得知，Vue的單文件組件是網(wǎng)頁開發(fā)中HTML、CSS和JavaScript三種語言經(jīng)典組合的自然延伸。<template>、<script>

和

<style>

三個塊在同一個文件中封裝，組合了組件的視圖、邏輯和樣式。任務(wù)5.1組件設(shè)計【知識鏈接】5.1.1組件基礎(chǔ)每個組件最多可以包含：一個頂層<template>塊；一個<script>塊；一個<scriptsetup>（不包括一般的<script>）；多個<style>標(biāo)簽。一個

<style>

標(biāo)簽可以使用

scoped

屬性來幫助封裝當(dāng)前組件的樣式，以免跟其它組件的樣式產(chǎn)生沖突。使用組件要使用一個組件，需要在父組件中導(dǎo)入、注冊它。注冊分為全局注冊與局部組件兩種方式。任務(wù)5.1組件設(shè)計【知識鏈接】5.1.1組件基礎(chǔ)全局注冊。組件在main.js通過ponent()方法全局注冊。通過全局注冊的組件在整個當(dāng)前的Vue應(yīng)用中都可以使用。格式如下：<!—main.js文件--> import{createApp}from‘vue’importMyComponentfrom‘./App.vue’//1.導(dǎo)入MyComponent組件constapp=createApp({})ponent(//注冊的名字’MyComponent’,//2.使用ponent()進(jìn)行全局注冊

//導(dǎo)入的組件MyComponent)//3.在當(dāng)前整個應(yīng)用的任意組件模板中通過自定義標(biāo)簽形式使用<template><MyComponet/> //或者使用<my-component></my-component></template>任務(wù)5.1組件設(shè)計【知識鏈接】5.1.1組件基礎(chǔ)局部注冊。局部注冊的組件需要在使用它的父組件中顯示導(dǎo)入，并且只能在該父組件中使用。格式如下：<scriptsetup>//1.導(dǎo)入ComponentA組件并注冊后，模板中可以直接使用importComponentAfrom‘./ComponentA.vue’</script><template>//2.模板中使用自定義標(biāo)簽進(jìn)行使用，也可以使用<component-a></component-a><ComponentA/></template>任務(wù)5.1組件設(shè)計【知識鏈接】5.1.1組件基礎(chǔ)組件名的注冊格式。在導(dǎo)入和注冊時建議使用PascalCase（帕斯卡命名法，即所有單詞的首字母大寫），在模板使用時可以通過PascalCase或者kebab-case（短橫線命名法）。比如，導(dǎo)入和注冊使用MyComponent，而在模板使用時<MyComponet/>或<my-component></my-component>。之前已經(jīng)創(chuàng)建完成的【例5-1】案例計數(shù)器組件ButtonCounter.vue，目前在瀏覽器端無法預(yù)覽，只有在父組件中注冊使用才能查看。代碼如下：//在App.vue文件中進(jìn)行導(dǎo)入、注冊和使用<scriptsetup>importButtonCounterfrom‘./src/component/ButtonCounter.vue’</script><template><button-counter></button-counter></template>任務(wù)5.1組件設(shè)計【知識鏈接】5.1.1組件基礎(chǔ)保存后刷新頁面即可看到效果，如圖5-3所示。圖5-3【例5-1】案例組件渲染效果圖任務(wù)5.1組件設(shè)計【知識鏈接】5.1.2組件之間的數(shù)據(jù)通信組件的作用域是相互獨(dú)立的，目的使代碼更加簡潔，容易維護(hù)。但這就意味著不同組件之間的數(shù)據(jù)無法相互引用。因此需要借助一些工具來實(shí)現(xiàn)數(shù)據(jù)在不同組件間的通信。在Vue中，組件的通信主要通過props和$emit來完成。組件通信示意圖如圖5-4所示。圖5-4組件通信示意圖任務(wù)5.1組件設(shè)計【知識鏈接】5.1.2組件之間的數(shù)據(jù)通信props傳值父組件把需要傳遞給子組件的數(shù)據(jù)，以屬性綁定（v-bind）的形式，通過子組件自定義標(biāo)簽傳遞到子組件內(nèi)部，供子組件使用。子組件需要在內(nèi)部定義props屬性，接收傳遞來的數(shù)據(jù)，才能在子組件中使用。例如，在一個博客項目中，希望所有的博客文章分享相同的視覺布局，但要有不同數(shù)據(jù)內(nèi)容。因此需要新建一個顯示博客文章的組件，在組件中定義樣式和行為，但數(shù)據(jù)內(nèi)容來自于父組件，比如每篇文章的標(biāo)題和內(nèi)容，這就會使用到props傳值技術(shù)?！纠?-2】props傳值案例。代碼如下：<!—App.vue父組件--><scriptsetup>importBlogPostfrom‘./components/BlogPost.vue’constposts=ref([{id:1,title:’堅持不懈’},{id:2,title:’努力拼搏’},{id:3,title:’勇于創(chuàng)新’}])</script><template><BlogPostv-for=“postinposts”:key=“post.id”//1.利用v-bind綁定biaoTi來傳遞props值:biaoTi=“post.title”/></template><!—BlogPost.vue子組件--><scriptsetup>//2.使用defineProps方法在組件上聲明props為biaoTidefineProps([‘biaoTi])</script><template><h4>{{biaoTi}}</h4>//3.使用傳遞過來的props值biaoTi</template>任務(wù)5.1組件設(shè)計【知識鏈接】5.1.2組件之間的數(shù)據(jù)通信props傳值效果圖如圖5-5所示。圖5-5【例5-2】props傳值案例效果圖defineProps是用來設(shè)置props的方法，僅能用在<scriptsetup>中，不需要顯式導(dǎo)入。聲明的props會自動暴露給模板。defineProps返回一個對象，其中包含了可以傳遞給組件的所有props，傳遞給defineProps()的參數(shù)，除了使用字符串?dāng)?shù)據(jù)來聲明props外，還可以使用對象的形式來規(guī)定props的值類型，比如，要求一個prop的值是String類型的代碼如下：defineProps({biaoTi:String})任務(wù)5.1組件設(shè)計【知識鏈接】5.1.2組件之間的數(shù)據(jù)通信$emit傳值$emit能夠?qū)⒆咏M件中的數(shù)據(jù)傳遞到父組件中去。子組件通過$emit觸發(fā)父組件中定義的事件，子組件數(shù)據(jù)通過傳遞參數(shù)方式完成。例如，在之前的博客案例【例5-2】中，增加一個功能，將博客文章的文字能夠放大，而頁面其余部分仍使用默認(rèn)字號?！纠?-2】$emit傳值案例，實(shí)現(xiàn)代碼如下：<!—App.vue父組件--><scriptsetup>constpostFontSize=ref(1)</script><template><div:style=”{fontSize:postFontSize+‘em’}”<BlogPostv-for=“postinposts”:key=“post.id”:biaoTi=“post.title”//1.父組件選擇性監(jiān)聽子組件上拋的事件@enlarge-text=“postFontSize+=0.1”/><template><divclass=“blog-post”><h4>{{biaoTi}}</h4><button//3.子組件通過調(diào)用內(nèi)置$emit方法，通過傳入事件名來拋出enlarge-text事件，父組件監(jiān)聽到enlarge-text事件，從而更新postFontSize的值。@click=“$emit(‘enlarge-text’)>放大字號</button></div></template>任務(wù)5.1組件設(shè)計【知識鏈接】5.1.2組件之間的數(shù)據(jù)通信</div></template><!—BlogPost.vue子組件--><scriptsetup>//2.通過defineEmits方法定義子組件上拋出的事件defineEmits([‘enlarge-text’])</script><template><divclass=“blog-post”><h4>{{biaoTi}}</h4><button//3.子組件通過調(diào)用內(nèi)置$emit方法，通過傳入事件名來拋出enlarge-text事件，父組件監(jiān)聽到enlarge-text事件，從而更新postFontSize的值。@click=“$emit(‘enlarge-text’)>放大字號</button></div></template>任務(wù)5.1組件設(shè)計【知識鏈接】5.1.2組件之間的數(shù)據(jù)通信效果如圖5-6所示。圖5-6【例5-2】$emit傳值案例效果圖任務(wù)5.1組件設(shè)計【知識鏈接】5.1.2組件之間的數(shù)據(jù)通信如果需要設(shè)置文本放大的具體值，涉及到子組件向父組件傳遞數(shù)據(jù)，可以給$emit提供額外的參數(shù)，【例5-2】$emit參數(shù)傳值案例：<!—MyButton子組件--><scriptsetup> defineEmits(['increaseBy'])//1.定義拋出的事件</script><template>//2.觸發(fā)父組件的increaseBy事件，第2個參數(shù)為傳遞的數(shù)據(jù) <button@click="$emit('increaseBy',3)">增大到3</button></template><!—App.vue子組件--><my-button@increaseBy="increaseFontSize"></my-button>//3.父組件接收到的參數(shù)n=3，將字號調(diào)整到3emfunctionincreaseFontSize(n){ postFontSize.value=n}任務(wù)5.1組件設(shè)計【知識鏈接】5.1.2組件之間的數(shù)據(jù)通信效果如圖5-7所示。圖5-7【例5-2】$emit參數(shù)傳值案例效果圖任務(wù)5.2點(diǎn)贊組件設(shè)計【任務(wù)陳述】本任務(wù)完成子組件Comments.vue中點(diǎn)贊功能?！救蝿?wù)分析】在之前的項目中，我們完成了最新崗位數(shù)據(jù)的渲染，但點(diǎn)贊功能并未起作用，因為點(diǎn)贊動作發(fā)生在子組件Comments.vue中，但渲染的數(shù)據(jù)卻保存在父組件App.vue中。本子任務(wù)主要實(shí)現(xiàn)通過$emit進(jìn)行子組件向父組件的通信來實(shí)現(xiàn)點(diǎn)贊功能以及點(diǎn)贊圖標(biāo)的切換。同時利用插槽技術(shù)完成對崗位標(biāo)題的動態(tài)渲染。圖5-8任務(wù)實(shí)施流程圖任務(wù)5.2點(diǎn)贊組件設(shè)計【任務(wù)實(shí)施】步驟一.通過$emit傳值技術(shù)完成點(diǎn)贊功能子組件拋出事件。在組件Comments.vue中聲明向父組件拋出的事件parentSupport，并定義點(diǎn)贊事件support<template>

//2.在div上單擊時，觸發(fā)support事件，同時傳入當(dāng)前數(shù)據(jù)的id值<div:class="['support',{supportActived:item.has_sup}]"v-on:click="support(index)">…</div></template><scriptsetup>//1.定義子組件的拋出事件parentSupportconstemits=defineEmits(['parentSupport'])functionsupport(index){letnewData={data:{id:messageList.value[index].id,email:messageList.value[index].email,name:messageList.value[index].name,

content:messageList.value[index].content,scale:messageList.value[index].scale,

support:messageList.value[index].support+1,has_sup:true,unnamed:messageList.value[index].unnamed,},index:index}//3.觸發(fā)父組件的parentSupport事件，傳入需要修改的數(shù)據(jù)emits('parentSupport',newData)}</script>任務(wù)5.2點(diǎn)贊組件設(shè)計【任務(wù)實(shí)施】步驟一.通過$emit傳值技術(shù)完成點(diǎn)贊功能父組件接收數(shù)據(jù)。父組件App.vue接收子組件的數(shù)據(jù)，修改support方法，完成點(diǎn)贊數(shù)據(jù)更改。<template><Commentsv-bind:messageList="messageList.content"v-bind:avatar_male="avatar_male"v-bind:avatar_female="avatar_female"http://1.父組件監(jiān)聽parentSupport事件，一旦子組件觸發(fā)則執(zhí)行父組件的support事件v-on:parentSupport="support"></Comments></template><scriptsetup>//點(diǎn)贊方法functionsupport(newData){

//數(shù)據(jù)傳遞給接口postSupportState(newData).then(postResult=>{if(postResult.status==200){getSupportState(newData.data.id).then(getResult=>{if(getResult.status==200){//2.此處數(shù)據(jù)參數(shù)有修改，改為傳入數(shù)據(jù)的index屬性messageList.content[newData.index]=getResult.data}})} })}</script>任務(wù)5.2點(diǎn)贊組件設(shè)計【任務(wù)實(shí)施】步驟二.利用插槽技術(shù)完成標(biāo)題渲染。將在項目中的“最新崗位”和“崗位發(fā)布”的標(biāo)題設(shè)置成組件，并以插槽形式傳入數(shù)據(jù)，方便標(biāo)題組件的復(fù)用。新建子組件Title.vue，設(shè)置slot插槽，存放于src/components目錄內(nèi)。<template><h2class="pt-2pb-3title">//標(biāo)題內(nèi)容由父組件傳入，內(nèi)容不定，由slot進(jìn)行占位<span><slot></slot></span></h2></template>父組件App.vue中引入子組件Title，并注冊使用。<!--最新崗位列表--><divclass="py-5">//父組件通過組件名標(biāo)簽將“最新崗位”傳入子組件Title.vue的插槽處<Title>最新崗位</Title><Comments……></Comments></div>…<tr><tdcolspan="4">//父組件通過組件名標(biāo)簽將“崗位發(fā)布”傳入子組件Title.vue的插槽處<Title>崗位發(fā)布</Title></td></tr>項目保存后，查看效果，順利渲染。任務(wù)5.2點(diǎn)贊組件設(shè)計【知識鏈接】5.2.1插槽組件可以通過接受任意類型的值作為props和$emit進(jìn)行通信，但組件要如何接收模板內(nèi)容呢？答案是，需要通過插槽體來實(shí)現(xiàn)。Vue為了實(shí)現(xiàn)組件的內(nèi)容分發(fā)，提供了一套用于組件內(nèi)容分發(fā)的API，也就是插槽。工作示意圖如圖5-9所示。圖5-9插槽工作示意圖【例5-3】插槽案例。以下代碼實(shí)現(xiàn)子組件的按鈕文字由父組件傳入。<!—父組件--><template><child-button>發(fā)送</child-button> <child-button>重置</child-button> <child-button>幫助</child-button></template><!—子組件--><template><button><slot></slot></button></template>任務(wù)5.2點(diǎn)贊組件設(shè)計【知識鏈接】5.2.1插槽效果如圖5-10所示。圖5-10【例5-3】插槽案例實(shí)現(xiàn)效果圖插槽分為默認(rèn)內(nèi)容、具名插槽、作用域插槽、動態(tài)插槽、具名作用域插槽。本教材介紹前3個插槽。任務(wù)5.2點(diǎn)贊組件設(shè)計【知識鏈接】5.2.2默認(rèn)內(nèi)容插槽在父組件沒有提供任何內(nèi)容的情況下，可以為插槽指定默認(rèn)內(nèi)容，只需將默認(rèn)內(nèi)容寫在標(biāo)簽中間?！纠?-4】默認(rèn)內(nèi)容插槽案例。代碼如下：<child-button></child-button>//父組件<button>//子組件<slot>Submit</slot></button>//按鈕上的文字渲染為Submit但是如果提供了插槽內(nèi)容，并且同時也有默認(rèn)內(nèi)容，則被顯式提供的內(nèi)容會取代默認(rèn)內(nèi)容，【例5-4】改寫代碼如下：<child-button>發(fā)送</child-button>//父組件<button>//子組件<slot>Submit</slot></button>//按鈕上的文字渲染為發(fā)送任務(wù)5.2點(diǎn)贊組件設(shè)計【知識鏈接】5.2.3具名插槽在實(shí)際開發(fā)中，組件中的插槽不止一個，有時需要多個插槽，這時需要給插槽通過name屬性來命名，用來給各個插槽分配唯一的ID，以確定每一處要渲染的內(nèi)容，這類帶name的插槽被稱之為具名插槽，沒有提供name的插槽出口會帶有隱含的”default”?！纠?-5】具名插槽案例，子組件代碼如下：<div><header><slotname=’header’><slot></header><main><slot><slot></main><footer><slotname=’footer’><slot></footer></div> 在為具名插槽提供內(nèi)容時，需要使用一個含v-slot指令的template元素，并將目標(biāo)插槽的名字傳給該指令。任務(wù)5.2點(diǎn)贊組件設(shè)計【知識鏈接】5.2.3具名插槽同時v-slot有對應(yīng)的簡寫#，【例5-5】具名插槽案例，父組件代碼如下：<child-layout><templatev-slot:header>這是頭部內(nèi)容 </template> <template#footer>//相當(dāng)于<templatev-slot:footer>這是頁腳內(nèi)容<template>//相當(dāng)于<templatev-slot:default><p>…</p></template><p>這是頁面主體內(nèi)容</p></child-layou