《Vue 3基礎(chǔ)入門》課件 第四章 Vue 3組件

Vue3

組件介紹組件是Vue3中最核心的功能之一，可用于前端應(yīng)用程序的模塊化開發(fā)，實(shí)現(xiàn)系統(tǒng)的可重用性和可擴(kuò)展性。組件是可復(fù)用的實(shí)例，在根組件實(shí)例中可用的選項(xiàng)也可以在組件中使用。開發(fā)人員能使用可復(fù)用組件系統(tǒng)構(gòu)建大型應(yīng)用程序，幾乎所有類型的應(yīng)用程序界面都可以抽象為一棵組件樹。Contents目錄快速構(gòu)建頁面組件間數(shù)據(jù)傳遞內(nèi)容分發(fā)01020304

其他應(yīng)用01快速構(gòu)建頁面PART1.1基本使用方法//定義一個(gè)名為<button-counter>的新組件Vponent('button-counter',{data:function(){return{count:0}},template:'<buttonv-on:click="count++">Youclickedme{{count}}times.</button>'})1.1基本使用方法組件是可復(fù)用的Vue3實(shí)例且?guī)в幸粋€(gè)名字，在這個(gè)例子中是<button-counter>。開發(fā)者可以在通過newVue創(chuàng)建的Vue3根實(shí)例中，將這個(gè)組件作為自定義元素來使用，代碼如下：<divid="components-demo">

<button-counter></button-counter></div>組件可以接收與newVue相同的選項(xiàng)，如data、computed、watch、methods以及鉤子函數(shù)等，但el選項(xiàng)例外。1.2組件復(fù)用每當(dāng)復(fù)用一個(gè)組件時(shí)，都會創(chuàng)建一個(gè)獨(dú)立的組件實(shí)例，每個(gè)實(shí)例都獨(dú)立維護(hù)它的數(shù)據(jù)。定義<button-counter>組件時(shí)，data選項(xiàng)并不是一個(gè)對象，而是一個(gè)函數(shù)，這是因?yàn)榻M件的data選項(xiàng)必須返回一個(gè)對象的獨(dú)立拷貝，以便每個(gè)組件實(shí)例可以維護(hù)自己的一份數(shù)據(jù)，代碼如下：data:function(){return{count:0}}1.3組織結(jié)構(gòu)通常情況下，應(yīng)用程序會以一棵嵌套的組件樹的形式進(jìn)行組織，如圖：需要將組件注冊到Vue3實(shí)例中才能使用，組件的注冊方式分為全局注冊和局部注冊兩種，全局注冊組件使用Vue3實(shí)例的component()函數(shù)，該函數(shù)接收兩個(gè)參數(shù)，第一個(gè)參數(shù)是組件的名稱，第二個(gè)參數(shù)是組件的配置對象或組件的選項(xiàng)。注冊的語法形式如下：ponent({string}name,{FunctionIObject}definition(optional))1.3組織結(jié)構(gòu)下面是一個(gè)全局注冊組件的例子代碼：constapp=Vue.createApp({});ponent('ButtonCounter',{data(){return{count:0}},template:'<button@click="count++">Youclickedme{{count}}times.</button>'});app.mount('#app');1.3組織結(jié)構(gòu)1.組件的內(nèi)容可以通過template選項(xiàng)定義，在使用組件時(shí)，組件所在位置會被template選項(xiàng)的內(nèi)容所替換。組件注冊完成后，可以將組件視為自定義元素，在需要的地方按照元素的方式使用，元素的名稱就是注冊時(shí)指定的組件名稱。<divid="app"><ButtonCounter></ButtonCounter></div>2.上述代碼并不能正常工作，因?yàn)镠TML并不區(qū)分元素和屬性的大小寫，瀏覽器會把所有大寫字符解釋為小寫字符，例如：會把<ButtonCounter>解釋為<buttoncounter>，這就導(dǎo)致找不到組件而出現(xiàn)錯(cuò)誤，解決辦法是在HTML模板中采用kebab-case命名引用組件。<divid="app"><button-counter></button-counter></div>1.3組織結(jié)構(gòu)只要組件注冊時(shí)采用的是PascalCase（首字母大寫）命名，就可以采用kebab-case命名來引用。在非HTML模板中可以使用組件的原始名稱，即<ButtonCounter>和<button-counter>都是可以的。如果要保持名字的統(tǒng)一性，可以在注冊組件時(shí)，直接使用kebab-case命名為組件命名，例如：ponent('button-counter',...)1.3組織結(jié)構(gòu)T由于HTML不支持自閉合的自定義元素，在HTML模板中不能將<ButtonCounter>組件當(dāng)作自閉合元素使用。例如：不能使用<button-counter/>，而應(yīng)該使用<button-counter></button-counter>。在非HTML模板中不存在這個(gè)限制，相反還鼓勵(lì)將沒有內(nèi)容的組件作為自閉合元素使用，這可以明確表示該組件沒有內(nèi)容，并且省略了結(jié)束標(biāo)記，代碼也更加簡潔。局部注冊是在組件實(shí)例的選項(xiàng)對象中使用component選項(xiàng)注冊。constMyComponent={data(){return{count:0}},template:'<buttonv-on:click="count++">Youclickedme{{count}}times.</button>'}constapp=Vue.createApp({components:{ButtonCounter:MyComponent}}).mount('#app');對于components選項(xiàng)對象，每個(gè)屬性的名稱就是自定義元素的名稱，其屬性值就是組件實(shí)例。全局注冊的組件可以在應(yīng)用程序的任何組件實(shí)例的模板中使用，而局部注冊的組件只能在父組件的模板中使用。1.4鉤子函數(shù)在Vue3中針對鉤子函數(shù)設(shè)計(jì)了新的函數(shù)，這些函數(shù)可以幫助開發(fā)者編寫更好的代碼。Vue3的CompositionAPI提供了一個(gè)setup()函數(shù)封裝了大部分組件代碼，并處理了響應(yīng)式、鉤子函數(shù)等，可以取代之前的beforeCreate()函數(shù)和Create()函數(shù)。鉤子函數(shù)是必須導(dǎo)入到項(xiàng)目中的，這是為了使項(xiàng)目盡可能輕量化。導(dǎo)入方式如下import{onMounted,onUpdated,onUnmounted}from'vue'

1.4鉤子函數(shù)0102固定欄靠前所謂的固定欄，也就是帶有.mui-bar屬性的節(jié)點(diǎn)，都是基于fixed定位的元素；常見組件包括：頂部導(dǎo)航欄（.mui-bar-nav）、底部工具條(.mui-bar-footer)、底部選項(xiàng)卡（.mui-bar-tab）;這些元素使用時(shí)需遵循一個(gè)規(guī)則：放在.mui-content元素之前，即使是底部工具條和底部選項(xiàng)卡，也要放在.mui-content之前，否則固定欄會遮住部分主內(nèi)容；一切內(nèi)容都要包裹在mui-content中。除了固定欄之外，其它內(nèi)容都要包裹在.mui-content中，否則就有可能被固定欄遮罩，原因：固定欄基于Fixed定位，不受流式布局限制，普通內(nèi)容依然會從top:0的位置開始布局，這樣就會被固定欄遮罩，mui為了解決這個(gè)問題，定義了如下css代碼：.mui-bar-nav~.mui-content{padding-top:44px;}.mui-bar-footer~.mui-content{padding-bottom:44px;}.mui-bar-tab~.mui-content{padding-bottom:50px;}

1.4鉤子函數(shù)0102舊的鉤子函數(shù)可以在setup()函數(shù)中訪問，代碼如下：exportdefault{setup(){onBeforeMount(()=>{//...})onMounted(()=>{//...})onBeforeUpdate(()=>{//...})onUpdated(()=>{//...})onBeforeUnmount(()=>{//...})onErrorCaptured(()=>{//...})}}import{onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,onActivated,onDeactivated,onErrorCaptured}from'vue'02組件間數(shù)據(jù)傳遞PART2.1通過props屬性傳遞數(shù)據(jù)0102使用組件時(shí)可以為組件元素設(shè)置屬性。首先需要在組件內(nèi)部注冊一些自定義屬性，稱為prop，這些prop是在組件的props選項(xiàng)中定義的，然后就可以將這些prop名稱作為元素的屬性名來使用，通過屬性向組件傳遞數(shù)據(jù)。代碼如下：Vponent('blog-post',{props:['title'],template:'<h3>{{title}}</h3>'})一個(gè)組件默認(rèn)可以擁有任意數(shù)量的prop，任何值都可以傳遞給任何prop。在上述模板中能夠在組件實(shí)例中訪問title這個(gè)值。一個(gè)prop被注冊之后，就可以像這樣把數(shù)據(jù)作為一個(gè)自定義屬性傳遞進(jìn)來。

2.2通過“總線”傳遞數(shù)據(jù)事件總線是Vue3的一個(gè)實(shí)例，也稱作EventBus。定義如下：importVuefrom'vue'exportdefaultnewVue()也可以直接在main.js中直接初始化，代碼如下：//main.jsVtotype.$EventBus=newVue()。<template><divclass="header"><divclass="header-logo"><imgalt="Vuelogo"src="../../assets/images/common/logo.png"@click="changeCollapse"></div></div></template>發(fā)送事件使用的是$emit()函數(shù)，該函數(shù)包含兩個(gè)參數(shù)：一個(gè)是事件名稱，一個(gè)是參數(shù)。以下是一個(gè)以ElementUI側(cè)邊欄菜單折疊為例的代碼：<script>importbusfrom'@/utils/eventBus.js'exportdefault{data(){return{collapse:false}},methods:{changeCollapse(){this.collapse=!this.collapsebus.$emit('collapse',this.collapse)}}}</script>2.2通過“總線”傳遞數(shù)據(jù)<template><divclass="sidebar"><el-scrollbarclass="scroll-wrapper"><el-menuclass="sidebar-el-menu":default-active="$route.path":collapse="collapse"unique-openedrouter><subItem:items="items":collapse="collapse"/></el-menu></el-scrollbar><divclass="slideIn"@click="changeCollapse">||</div></div></template>接下來需要在需要響應(yīng)的組件中接收事件并作出響應(yīng)，代碼如下：<script>importbusfrom"@/utils/eventBus.js"importsubItemfrom"./subitem"exportdefault{props:['items'],data(){return{collapse:false}},created(){bus.$on("collapse",msg=>{this.collapse=msg})},methods:{changeCollapse(){this.collapse=!this.collapsebus.$emit("collapse",this.collapse)}}}</script>2.2通過“總線”傳遞數(shù)據(jù)<script>importbusfrom"@/utils/eventBus.js"exportdefault{methods:{handleClick(){bus.$off("collapse",{})//移除單個(gè)事件bus.$off()//移除全部事件}}}</script>移除事件可使用$off，單獨(dú)移除某一個(gè)事件的監(jiān)聽需要第一個(gè)參數(shù)，即事件名稱，全部移除則不需要任何參數(shù)，代碼如下：2.3通過監(jiān)聽事件傳遞數(shù)據(jù)前面介紹了父組件可以通過prop向子組件傳遞數(shù)據(jù)，反過來，子組件的某些功能需要與父組件進(jìn)行通信，則可以通過自定義事件實(shí)現(xiàn)。子組件使用$emit()函數(shù)觸發(fā)事件，父組件使用v-on指令監(jiān)聽子組件的自定義事件，$emit()函數(shù)的語法形式如下：$emit(eventName,[...args])eventName為事件名，args為附加參數(shù)，這些參數(shù)會傳給事件監(jiān)聽器的回調(diào)函數(shù)。子組件通過第二個(gè)參數(shù)向父組件傳遞數(shù)據(jù)。ponent('child',{data(){return{name:'張三'}},

methods:{handleClick(){//調(diào)用實(shí)例的$emit()函數(shù)觸發(fā)自定義事件greet，并傳遞參數(shù)

this.$emit('greet',);}},template:'<button@click="handleClick">開始?xì)g迎</button>'})2.3通過監(jiān)聽事件傳遞數(shù)據(jù)0102子組件中的按鈕接收到click事件后，使用$emit()函數(shù)觸發(fā)一個(gè)自定義事件，使用組件時(shí)可以使用v-on指令監(jiān)聽greet事件，實(shí)現(xiàn)子組件向父組件傳遞數(shù)據(jù)，代碼如下：<divid="app"><child@greet="sayHello"></child></div>constapp=Vue.createApp({methods:{//自定義事件的附加參數(shù)會自動傳入函數(shù)sayHello(name){alert("Hello,"+name);}}});與組件和prop不同，事件名不會自動轉(zhuǎn)換大小寫。調(diào)用$emit()函數(shù)觸發(fā)的事件名稱需要與用于監(jiān)聽該事件的名稱完全匹配。如果在v-on指令中直接使用JavaScript語句，則可以通過$emit()函數(shù)訪問自定義事件的附加參數(shù)，示例代碼如下：<button@click="$emit('enlarge-text',0.1)">Enlargetext</button>；03內(nèi)容分發(fā)PART3.1基本使用方法創(chuàng)建組件代碼如下：<navigation-linkurl="/profile">YourProfile</navigation-link><navigation-link>模板代碼如下：<av-bind:href="url"class="nav-link"><slot></slot></a>當(dāng)組件渲染時(shí)，<slot></slot>將被替換為“YourProfile”，插槽內(nèi)可以包含任何模板代碼或者組件，代碼如下：<navigation-linkurl="/profile"><!--添加一個(gè)FontAwesome圖標(biāo)--><spanclass="fafa-user"></span>YourProfile</navigation-link><navigation-linkurl="/profile"><!--添加一個(gè)圖標(biāo)的組件--><font-awesome-iconname="user"></font-awesome-icon>YourProfile</navigation-link>如果<navigation-link>的模板中沒有包含<slot>元素，則該組件起始標(biāo)簽和結(jié)束標(biāo)簽之間的內(nèi)容都會被拋棄。3.2編譯作用域在插槽中使用數(shù)據(jù)的模板代碼如下：<navigation-linkurl="/profile">

Loggedinas{{}}</navigation-link>該插槽跟模板的其他地方一樣可以訪問相同的實(shí)例property(也就是相同的“作用域”)，而不能訪問<navigation-link>的作用域，例如：下方代碼中url是訪問不到的：<navigation-linkurl="/profile">Clickingherewillsendyouto:{{url}}//這里的'url'會是undefined</navigation-link>3.3后備內(nèi)容可以給一個(gè)插槽設(shè)置默認(rèn)內(nèi)容，這個(gè)內(nèi)容只會在沒有提供內(nèi)容時(shí)被渲染，例如：<button>組件大部分時(shí)候渲染文本“Submit”作為默認(rèn)內(nèi)容，示例代碼如下：<buttontype="submit">

<slot>Submit</slot></button>當(dāng)在一個(gè)父組件中使用<submit-button>并且沒有提供任何插槽內(nèi)容時(shí)，將會渲染默認(rèn)內(nèi)容“Submit”，如果提供了內(nèi)容，則會渲染提供的內(nèi)容，代碼如下：<submit-button></submit-button><buttontype="submit">Submit</button><submit-button>Save</submit-button><buttontype="submit">Save</button>3.4具名插槽有時(shí)在項(xiàng)目中需要使用多個(gè)插槽，<slot>元素有一個(gè)特殊的屬性name可以用來定義額外的插槽，沒有name屬性的<slot>元素會有一個(gè)隱含的名字“default”。<divclass="container"><header>

<slotname="header"></slot></header><main><slot></slot></main><footer><slotname="footer"></slot></footer></div>3.4具名插槽在向具名插槽提供內(nèi)容的時(shí)候，可以在<template>元素上使用v-slot指令，并以v-slot的參數(shù)的形式提供其名稱。<base-layout><templatev-slot:header><h1>Heremightbeapagetitle</h1></template><p>Aparagraphforthemaincontent.</p><p>Andanotherone.</p><templatev-slot:footer><p>Here'ssomecontactinfo</p></template></base-layout>

3.4具名插槽<template>元素中的所有內(nèi)容都將傳遞到相應(yīng)的插槽中，任何沒有被包裹在帶有v-slot的<template>中的內(nèi)容都將被視為默認(rèn)插槽的內(nèi)容。如果希望更明確則可在一個(gè)<template>中包括默認(rèn)插槽的內(nèi)容，注意v-slot只能添加在<template>上。

<templatev-slot:footer><p>Here'ssomecontactinfo</p></template></base-layout><divclass="container"><header><h1>Heremightbeapagetitle</h1></header><main><p>Aparagraphforthemaincontent.</p><p>Andanotherone.</p></main><footer><p>Here'ssomecontactinfo</p></footer></div><base-layout><templatev-slot:header><h1>Heremightbeapagetitle</h1></template><templatev-slot:default><p>Aparagraphforthemaincontent.</p><p>Andanotherone.</p></template>3.5作用域插槽有時(shí)候讓插槽內(nèi)容能夠訪問子組件中的數(shù)據(jù)是非常有用的，例如：<current-user>組件想要更改默認(rèn)內(nèi)容為user.firstName。

<span><slot>{{user.lastName}}</slot></span><current-user>{{user.firstName}}</current-user>上述代碼不能正常工作，因?yàn)橹挥?lt;current-user>組件可以訪問到user，而代碼中提供的內(nèi)容是在父級渲染的。為了讓user在父級的插槽內(nèi)容中可用，可以將user作為<slot>元素的一個(gè)屬性綁定上去。<span><slotv-bind:user="user">{{user.lastName}}</slot></span>綁定在<slot>元素上的屬性被稱為插槽prop，在父級作用域中可以使用帶值的v-slot來定義插槽prop的名字，將包含所有插槽prop的對象命名為slotProps，也可任意命名。

<current-user><templatev-slot:default="slotProps">{{slotProps.user.firstName}}</template></current-user>

3.6動態(tài)插槽名動態(tài)指令參數(shù)也可以用在v-slot上，來定義動態(tài)的插槽名，代碼如下：<base-layout><templatev-slot:[dynamicSlotName]>...