Vue.js前端開發(fā)實戰(zhàn)（第2版） 課件 第3、4章 組件基礎(chǔ)（上）（下）

第3章組件基礎(chǔ)（上）《Vue.js前端開發(fā)實戰(zhàn)（第2版）》學習目標/Target

掌握生命周期函數(shù)的使用方法，能夠靈活運用生命周期函數(shù)在特定時間執(zhí)行特

定的操作掌握引用組件的方法，能夠在Vue項目中以標簽的形式引用組件熟悉選項式API和組合式API，能夠說出選項式API和組合式API的區(qū)別掌握注冊組件的方法，能夠運用全局注冊或者局部注冊的方式完成組件的注冊學習目標/Target掌握組件之間樣式?jīng)_突問題的解決方法，能夠運用<style>標簽的scoped屬性

和深度選擇器解決組件之間樣式?jīng)_突的問題掌握跨級組件之間的傳遞數(shù)據(jù)的方法，能夠使用依賴注入實現(xiàn)數(shù)據(jù)共享掌握父組件向子組件傳遞數(shù)據(jù)的方法，能夠使用props實現(xiàn)數(shù)據(jù)傳遞

掌握子組件向父組件傳遞數(shù)據(jù)的方法，能夠使用自定義事件實現(xiàn)數(shù)據(jù)傳遞章節(jié)概述/Summary在學習完第2章的基礎(chǔ)知識后，讀者應(yīng)該已經(jīng)可以編寫一些簡單的組件了，但是這樣的組件功能比較簡單，無法滿足實際項目開發(fā)中各種復(fù)雜的需求。為了能夠更靈活地使用組件，讀者還需要更深入地學習組件的相關(guān)知識。本書將用第3章和第4章共兩章的篇幅詳細講解組件基礎(chǔ)，本章為上半部分內(nèi)容。目錄/Contents3.13.23.3選項式API和組合式API生命周期函數(shù)組件的注冊和引用3.4解決組件之間的樣式?jīng)_突目錄/Contents3.53.63.7父組件向子組件傳遞數(shù)據(jù)子組件向父組件傳遞數(shù)據(jù)跨級組件之間的數(shù)據(jù)傳遞3.8階段案例——待辦事項選項式API和組合式API3.1熟悉選項式API和組合式API，能夠說出選項式API和組合式API的區(qū)別3.1選項式API和組合式API

先定一個小目標！Vue3支持選項式API和組合式API。其中，選項式API是從Vue2開始使用的一種寫法，而Vue3新增了組合式API的寫法。選項式API選項式API是一種通過包含多個選項的對象來描述組件邏輯的API，其常用的選項包括data、methods、computed、watch等。組合式API相比于選項式API，組合式API是將組件中的數(shù)據(jù)、方法、計算屬性、偵聽器等代碼全部組合在一起，寫在setup()函數(shù)中。3.1選項式API和組合式API<script>exportdefault{data(){return{//定義數(shù)據(jù)}},methods:{//定義方法},computed:{//定義計算屬性},watch:{//定義偵聽器}}</script>選項式API的語法格式如下。3.1選項式API和組合式API<script>import{computed,watch}from'vue'exportdefault{setup(){const數(shù)據(jù)名=數(shù)據(jù)值const方法名=()=>{}

const計算屬性名=computed(()=>{})

watch(偵聽器的來源,回調(diào)函數(shù),可選參數(shù))return{數(shù)據(jù)名,方法名,計算屬性名}}}</script>組合式API的語法格式如下。3.1選項式API和組合式API<scriptsetup>import{computed,watch}from'vue'//定義數(shù)據(jù)const數(shù)據(jù)名=數(shù)據(jù)值//定義方法const方法名=()=>{}//定義計算屬性const計算屬性名=computed(()=>{})//定義偵聽器watch(偵聽器的來源,回調(diào)函數(shù),可選參數(shù))</script>Vue還提供了setup語法糖，用于簡化組合式API的代碼。使用setup語法糖時，組合式API的語法格式如下。3.1選項式API和組合式API選項式API和組合式API的關(guān)系Vue提供的選項式API和組合式API這兩種寫法可以覆蓋大部分的應(yīng)用場景，它們是同一底層系統(tǒng)所提供的兩套不同的接口。選項式API是在組合式API的基礎(chǔ)上實現(xiàn)的。3.1選項式API和組合式API企業(yè)在開發(fā)大型項目時，隨著業(yè)務(wù)復(fù)雜度的增加，代碼量會不斷增加。如果使用選項式API，整個項目邏輯不易閱讀和理解，而且查找對應(yīng)功能的代碼會存在一定難度。如果使用組合式API，可以將項目的每個功能的數(shù)據(jù)、方法放到一起，這樣不管項目的大小，都可以快速定位到功能區(qū)域的相關(guān)代碼，便于閱讀和維護。同時，組合式API可以通過函數(shù)來實現(xiàn)高效的邏輯復(fù)用，這種形式更加自由，需要開發(fā)者有較強的代碼組織能力和拆分邏輯能力。3.1選項式API和組合式API步驟1打開命令提示符，切換到D:\vue\chapter03目錄，在該目錄下執(zhí)行如下命令，創(chuàng)建項目。步驟3步驟4步驟2步驟5演示選項式API和組合式API的使用方法yarncreatevitecomponent_basis--templatevue項目創(chuàng)建完成后，執(zhí)行如下命令進入項目目錄，啟動項目。cdcomponent_basisyarnyarndev項目啟動后，可以使用URL地址:5173/進行訪問。3.1選項式API和組合式API步驟1步驟3步驟4步驟2步驟5使用VSCode編輯器打開D:\vue\chapter03\component_basis目錄。演示選項式API和組合式API的使用方法3.1選項式API和組合式API步驟3步驟4步驟2步驟5步驟1將src\style.css文件中的樣式代碼全部刪除，從而避免項目創(chuàng)建時自帶的樣式代碼影響本案例的實現(xiàn)效果。演示選項式API和組合式API的使用方法3.1選項式API和組合式API步驟3步驟4步驟2步驟5步驟1創(chuàng)建src\components\OptionsAPI.vue文件，用于演示選項式API的寫法，在該文件中實現(xiàn)單擊“+1”按鈕使數(shù)字加1的效果。<template><div>數(shù)字：{{number}}</div><button@click="addNumber">+1</button></template><script>exportdefault{data(){return{number:1}},methods:{addNumber(){this.number++}}}</script>演示選項式API和組合式API的使用方法3.1選項式API和組合式API步驟3步驟4步驟2步驟5步驟1修改src\main.js文件，切換頁面中顯示的組件。importAppfrom'./components/OptionsAPI.vue'演示選項式API和組合式API的使用方法3.1選項式API和組合式API保存上述代碼后，在瀏覽器中訪問:5173/，通過選項式API實現(xiàn)的初始頁面效果如下圖所示。3.1選項式API和組合式API單擊“+1”按鈕后的頁面效果如下圖所示。從上圖可以看出，單擊“+1”按鈕后，數(shù)字變?yōu)?，說明通過選項式API的寫法實現(xiàn)數(shù)字加1的效果成功。3.1選項式API和組合式API步驟6步驟7創(chuàng)建src\components\CompositionAPI.vue文件，用于演示組合式API的寫法，在該文件中實現(xiàn)單擊“+1”按鈕使數(shù)字加1的效果。<template><div>數(shù)字：{{number}}</div><button@click="addNumber">+1</button></template><scriptsetup>import{ref}from'vue'letnumber=ref(1)constaddNumber=()=>{number.value++}</script>演示選項式API和組合式API的使用方法3.1選項式API和組合式API步驟6步驟7修改src\main.js文件，切換頁面中顯示的組件。importAppfrom'./components/CompositionAPI.vue'演示選項式API和組合式API的使用方法3.1選項式API和組合式API保存上述代碼后，在瀏覽器中訪問:5173/，初始頁面效果與通過選項式API實現(xiàn)的初始頁面效果相同。3.1選項式API和組合式API生命周期函數(shù)3.2掌握生命周期函數(shù)的使用方法，能夠靈活運用生命周期函數(shù)在特定時間執(zhí)行特定的操作3.2生命周期函數(shù)

先定一個小目標！什么是生命周期函數(shù)？3.2生命周期函數(shù)在Vue中，組件的生命周期是指每個組件從被創(chuàng)建到被銷毀的整個過程，每個組件都有生命周期。如果想要在某個特定的時機進行特定的處理，可以通過生命周期函數(shù)來完成。隨著組件生命周期的變化，生命周期函數(shù)會自動執(zhí)行。3.2生命周期函數(shù)函數(shù)說明onBeforeMount()組件掛載前onMounted()組件掛載成功后onBeforeUpdate()組件更新前onUpdated()組件中的任意的DOM元素更新后onBeforeUnmount()組件實例被銷毀前onUnmounted()組件實例被銷毀后組合式API下的生命周期函數(shù)如下表所示。

3.2生命周期函數(shù)<scriptsetup>import{onMounted}from'vue'onMounted(()=>{//執(zhí)行操作})</script>3.2生命周期函數(shù)以onMounted()函數(shù)為例演示生命周期函數(shù)的使用。

步驟1演示生命周期函數(shù)的使用方法步驟2創(chuàng)建src\components\LifecycleHooks.vue文件，用于通過生命周期函數(shù)查看在特定時間點下的DOM元素。<template><divclass="container">container</div></template><scriptsetup>import{onBeforeMount,onMounted}from'vue'onBeforeMount(()=>{console.log('DOM元素渲染前',document.querySelector('.container'))})onMounted(()=>{console.log('DOM元素渲染后',document.querySelector('.container'))})</script>3.2生命周期函數(shù)步驟1步驟2修改src\main.js文件，切換頁面中顯示的組件。importAppfrom'./components/LifecycleHooks.vue'演示生命周期函數(shù)的使用方法3.2生命周期函數(shù)保存上述代碼后，在瀏覽器中訪問:5173/并打開控制臺，使用生命周期函數(shù)的頁面效果和控制臺如下圖所示。3.2生命周期函數(shù)多學一招：選項式API下的生命周期函數(shù)函數(shù)說明beforeCreate()實例對象創(chuàng)建前created()實例對象創(chuàng)建后beforeMount()頁面掛載前mounted()頁面掛載成功后beforeUpdate()組件更新前updated()組件中的任意的DOM元素更新后beforeDestroy()組件實例銷毀前destroyed()組件實例銷毀后選項式API下的生命周期函數(shù)如下表所示。

3.2生命周期函數(shù)<script>exportdefault{data(){return{value:'HelloVue.js'}},beforeCreate(){console.log('實例對象創(chuàng)建前:'+this.value)},created(){console.log('實例對象創(chuàng)建后:'+this.value)}}</script>3.2生命周期函數(shù)演示選項式API下beforeCreate()函數(shù)和created()函數(shù)的使用。

組件的注冊和引用3.3掌握注冊組件的方法，能夠運用全局注冊或者局部注冊的方式完成組件的注冊3.3.1注冊組件

先定一個小目標！3.3.1注冊組件為什么需要注冊組件？3.3.1注冊組件當在Vue項目中定義了一個新的組件后，要想在其他組件中引用這個新的組件，需要對新的組件進行注冊。在注冊組件的時候，需要給組件取一個名字，從而區(qū)分每個組件，可以采用帕斯卡命名法（PascalCase）為組件命名。Vue提供了兩種注冊組件的方式，分別是全局注冊和局部注冊。component('組件名稱',需要被注冊的組件)1.全局注冊在實際開發(fā)中，如果某個組件的使用頻率很高，許多組件中都會引用該組件，則推薦將該組件全局注冊。被全局注冊的組件可以在當前Vue項目的任何一個組件內(nèi)引用。在Vue項目的src\main.js文件中，通過Vue應(yīng)用實例的component()方法可以全局注冊組件，該方法的語法格式如下。3.3.1注冊組件上述語法格式中，component()方法接收兩個參數(shù)，第1個參數(shù)為組件名稱，注冊完成后即可全局使用該組件名稱，第2個參數(shù)為需要被注冊的組件。import{createApp}from'vue';import'./style.css'importAppfrom'./App.vue'importMyComponentfrom'./components/MyComponent.vue'constapp=createApp(App)ponent('MyComponent',MyComponent)app.mount('#app')在src\main.js文件中注冊一個全局組件MyComponent，示例代碼如下。3.3.1注冊組件ponent('ComponentA',ComponentA).component('ComponentB',ComponentB).component('ComponentC',ComponentC)component()方法支持鏈式調(diào)用，可以連續(xù)注冊多個組件，示例代碼如下。3.3.1注冊組件在實際開發(fā)中，如果某些組件只在特定的情況下被用到，推薦進行局部注冊。局部注冊即在某個組件中注冊，被局部注冊的組件只能在當前注冊范圍內(nèi)使用。局部注冊組件的示例代碼如下。2.局部注冊<script>importComponentAfrom'./ComponentA.vue'exportdefault{components:{ComponentA:ComponentA}}</script>3.3.1注冊組件在使用setup語法糖時，導(dǎo)入的組件會被自動注冊，無須手動注冊，導(dǎo)入后可以直接在模板中使用，示例代碼如下。<scriptsetup>importComponentAfrom'./ComponentA.vue'</script>3.3.1注冊組件掌握引用組件的方法，能夠在Vue項目中以標簽的形式引用組件3.3.2

引用組件

先定一個小目標！將組件注冊完成后，若要將組件在頁面中渲染出來，需要引用組件。在組件的<template>標簽中可以引用其他組件，被引用的組件需要寫成標簽的形式，標簽名應(yīng)與組件名對應(yīng)。組件的標簽名可以使用短橫線分隔或帕斯卡命名法命名。例如，<my-component>標簽和<MyComponent>標簽都表示引用MyComponent組件。一個組件可以被引用多次，但不可出現(xiàn)自我引用和互相引用的情況，否則會出現(xiàn)死循環(huán)。3.3.2

引用組件步驟1創(chuàng)建src\components\ComponentUse.vue文件。步驟3步驟4步驟2步驟5演示組件的使用方法<template><h5>父組件</h5><divclass="box"></div></template><style>.box{display:flex;}</style>3.3.2

引用組件步驟1步驟3步驟4步驟2步驟53.3.2

引用組件演示組件的使用方法修改src\main.js文件，切換頁面中顯示的組件。importAppfrom'./components/ComponentUse.vue'步驟3步驟4步驟2步驟5步驟1創(chuàng)建src\components\GlobalComponent.vue文件，表示全局組件。3.3.2

引用組件演示組件的使用方法<template><divclass="global-container"><h5>全局組件</h5></div></template><style>.global-container{border:1pxsolidblack;height:50px;flex:1;}</style>步驟3步驟4步驟2步驟5步驟1創(chuàng)建src\components\LocalComponent.vue文件，表示局部組件。<template><divclass="local-container"><h5>局部組件</h5></div></template><style>.local-container{border:1pxdashedblack;height:50px;flex:1;}</style>3.3.2

引用組件演示組件的使用方法步驟3步驟4步驟2步驟5步驟1修改src\main.js文件，導(dǎo)入GlobalComponent組件并調(diào)用component()方法全局注冊GlobalComponent組件。import{createApp}from'vue'import'./style.css'importAppfrom'./components/ComponentUse.vue'importGlobalComponentfrom'./components/GlobalComponent.vue'constapp=createApp(App)ponent('GlobalComponent',GlobalComponent)app.mount('#app')3.3.2

引用組件演示組件的使用方法步驟6步驟7修改src\components\ComponentUse.vue文件，添加代碼導(dǎo)入LocalComponent組件。<scriptsetup>importLocalComponentfrom'./LocalComponent.vue'</script>3.3.2

引用組件演示組件的使用方法步驟6步驟7修改src\components\ComponentUse.vue文件，在class為box的<div>標簽中引用GlobalComponent組件和LocalComponent組件。<divclass="box"><GlobalComponent/><LocalComponent/></div>3.3.2

引用組件演示組件的使用方法保存上述代碼后，在瀏覽器中訪問:5173/，引用組件后的頁面效果如下圖所示。3.3.2

引用組件解決組件之間的樣式?jīng)_突3.4掌握組件之間樣式?jīng)_突問題的解決方法，能夠運用<style>標簽的scoped屬性和深度選擇器解決組件之間樣式?jīng)_突的問題3.4解決組件之間的樣式?jīng)_突

先定一個小目標！h5{border:1pxdottedblack;}在默認情況下，寫在Vue組件中的樣式會全局生效，很容易造成多個組件之間的樣式?jīng)_突問題。例如，為ComponentUse組件中的h5元素添加邊框樣式，具體代碼如下。3.4解決組件之間的樣式?jīng)_突保存上述代碼后，在瀏覽器中訪問:5173/，添加邊框樣式后的頁面效果如下圖所示。從上圖可以看出，ComponentUse組件、GlobalComponent組件和LocalComponent組件中h5元素的邊框樣式都發(fā)生了改變，但是代碼中只有ComponentUse組件設(shè)置了邊框樣式效果，說明組件之間存在樣式?jīng)_突。3.4解決組件之間的樣式?jīng)_突為什么組件之間會產(chǎn)生樣式?jīng)_突？3.4解決組件之間的樣式?jīng)_突導(dǎo)致組件之間樣式?jīng)_突的根本原因是：在單頁Web應(yīng)用中，所有組件的DOM結(jié)構(gòu)都是基于唯一的index.html頁面進行呈現(xiàn)的。每個組件中的樣式都可以影響整個頁面中的DOM元素。在Vue中可以使用scoped屬性和深度選擇器來解決組件之間的樣式?jīng)_突。3.4解決組件之間的樣式?jīng)_突1.scoped屬性Vue為<style>標簽提供了scoped屬性，用于解決組件之間的樣式?jīng)_突。為<style>標簽添加scoped屬性后，Vue會自動為當前組件的DOM元素添加一個唯一的自定義屬性（如data-v-7ba5bd90），并在樣式中為選擇器添加自定義屬性（如.list[data-v-7ba5bd90]），從而限制樣式的作用范圍，防止組件之間的樣式?jīng)_突問題。3.4解決組件之間的樣式?jīng)_突<stylescoped>下面演示scoped屬性的使用。修改ComponentUse組件，為<style>標簽添加scoped屬性，具體代碼如下。保存上述代碼后，在瀏覽器中訪問:5173/，在<style>標簽中添加scoped屬性的頁面效果如下圖所示。3.4解決組件之間的樣式?jīng)_突打開開發(fā)者工具，切換到Elements面板，查看父組件的h5元素的代碼，如下圖所示。從上圖可以看出，當<style>標簽添加scoped屬性后，h5元素和相應(yīng)的選擇器被Vue自動添加了data-v-e4f30916屬性，從而解決了樣式?jīng)_突的問題。3.4解決組件之間的樣式?jīng)_突2.深度選擇器如果給當前組件的<style>標簽添加了scoped屬性，則當前組件的樣式對其子組件是不生效的。如果在添加了scoped屬性后還需要讓某些樣式對子組件生效，則可以使用深度選擇器來實現(xiàn)。深度選擇器通過:deep()偽類來實現(xiàn)，在其小括號中可以定義用于子組件的選擇器，例如，“:deep(.title)”被編譯之后生成選擇器的格式為“[data-v-7ba5bd90].title”。3.4解決組件之間的樣式?jīng)_突步驟1步驟2為LocalComponent組件的h5元素添加class屬性。<h5class="title">局部組件</h5>演示如何通過ComponentUse組件更改LocalComponent組件的樣式3.4解決組件之間的樣式?jīng)_突步驟1步驟2在ComponentUse組件中定義.title的樣式。:deep(.title){border:3pxdottedblack;}3.4解決組件之間的樣式?jīng)_突演示如何通過ComponentUse組件更改LocalComponent組件的樣式保存上述代碼后，在瀏覽器中訪問:5173/，添加深度選擇器實現(xiàn)樣式穿透的頁面效果如下圖所示。3.4解決組件之間的樣式?jīng)_突打開開發(fā)者工具，切換到Elements面板，查看LocalComponent組件的h5元素的代碼，頁面效果如下圖所示。3.4解決組件之間的樣式?jīng)_突父組件向子組件傳遞數(shù)據(jù)3.5掌握聲明props，能夠在子組件中聲明props3.5.1聲明props

先定一個小目標！若想實現(xiàn)父組件向子組件傳遞數(shù)據(jù)，需要先在子組件中聲明props，表示子組件可以從父組件中接收哪些數(shù)據(jù)。3.5.1聲明props<script>exportdefault{props:{

自定義屬性A:類型,

自定義屬性B:類型,……}}</script>在不使用setup語法糖的情況下，可以使用props選項聲明props。props選項的形式可以是對象或字符串數(shù)組。聲明對象形式的props的語法格式如下。3.5.1聲明propsprops:['自定義屬性A','自定義屬性B'],如果不需要限制props的類型，可以聲明字符串數(shù)組形式的props，示例代碼如下。<scriptsetup>constprops=defineProps({'自定義屬性A':類型},{'自定義屬性B':類型})</script>當使用setup語法糖時，可使用defineProps()函數(shù)聲明props，語法格式如下。3.5.1聲明propsconstprops=defineProps(['自定義屬性A','自定義屬性B'])使用defineProps()函數(shù)聲明字符串數(shù)組形式的props，語法格式如下。<template>{{自定義屬性A}}{{自定義屬性B}}</template>在組件中聲明了props后，可以直接在模板中輸出每個prop的值，語法格式如下。3.5.1聲明props掌握父組件向子組件傳遞靜態(tài)數(shù)據(jù)的方法，能夠通過靜態(tài)綁定props實現(xiàn)數(shù)據(jù)傳遞3.5.2靜態(tài)綁定props

先定一個小目標！當在父組件中引用了子組件后，如果子組件中聲明了props，則可以在父組件中向子組件傳遞數(shù)據(jù)。如果傳遞的數(shù)據(jù)是固定不變的，則可以通過靜態(tài)綁定props的方式為子組件傳遞數(shù)據(jù)。3.5.2靜態(tài)綁定props<子組件標簽名自定義屬性A="數(shù)據(jù)"自定義屬性B="數(shù)據(jù)"/>通過靜態(tài)綁定props的方式為子組件傳遞數(shù)據(jù)，其語法格式如下。在上述語法格式中，父組件向子組件的props傳遞了靜態(tài)的數(shù)據(jù)，屬性值默認為字符串類型。3.5.2靜態(tài)綁定props如果子組件中未聲明props，則父組件向子組件中傳遞的數(shù)據(jù)會被忽略，無法被子組件使用。注意3.5.2靜態(tài)綁定props步驟1演示父組件向子組件傳遞數(shù)據(jù)的方法創(chuàng)建src\components\Count.vue文件，用于展示子組件的相關(guān)內(nèi)容。<template>

初始值為：{{num}}</template><scriptsetup>constprops=defineProps({num:String})</script>步驟3步驟23.5.2靜態(tài)綁定props演示父組件向子組件傳遞數(shù)據(jù)的方法創(chuàng)建src\components\Props.vue文件，用于展示父組件的相關(guān)內(nèi)容。<template><Countnum="1"/></template><scriptsetup>importCountfrom'./Count.vue'</script>步驟1步驟3步驟23.5.2靜態(tài)綁定props步驟1步驟3步驟2演示父組件向子組件傳遞數(shù)據(jù)的方法修改src\main.js文件，切換頁面中顯示的組件。importAppfrom'./components/Props.vue'3.5.2靜態(tài)綁定props保存上述代碼后，在瀏覽器中訪問:5173/，父組件向子組件中傳遞數(shù)據(jù)的頁面效果如下圖所示。掌握父組件向子組件傳遞動態(tài)數(shù)據(jù)的方法，能夠使用props實現(xiàn)數(shù)據(jù)傳遞3.5.3動態(tài)綁定props

先定一個小目標！在父組件中使用v-bind可以為子組件動態(tài)綁定props，任意類型的值都可以傳給子組件的props，包括字符串、數(shù)字、布爾值、數(shù)組、對象等。3.5.3動態(tài)綁定props3.5.3動態(tài)綁定props<template><Child:init="username"/></template><scriptsetup>importChildfrom'./Child.vue'import{ref}from'vue'constusername=ref('小圓')</script>1.字符串從父組件中為子組件傳遞字符串類型的props數(shù)據(jù)，示例代碼如下。3.5.3動態(tài)綁定props<template></template><scriptsetup>constprops=defineProps(['init'])console.log(props)</script>上述代碼用到了名稱為Child的子組件，該子組件的示例代碼如下。3.5.3動態(tài)綁定props<template><Child:init="12"/><Child:init="age"/></template><scriptsetup>importChildfrom'./Child.vue'import{ref}from'vue'constage=ref(12)</script>2.數(shù)字從父組件中為子組件傳遞數(shù)字類型的props數(shù)據(jù)，示例代碼如下。3.5.3動態(tài)綁定props<template><Childinit/><Child:init="false"/><Child:init="isFlag"/></template><scriptsetup>importChildfrom'./Child.vue'import{ref}from'vue'constisFlag=ref(true)</script>3.布爾值從父組件中為子組件傳遞布爾類型的props數(shù)據(jù)，示例代碼如下。3.5.3動態(tài)綁定props<template><Child:init="['唱歌','跳舞','滑冰']"/><Child:init="hobby"/></template><scriptsetup>importChildfrom'./Child.vue'import{ref}from'vue'consthobby=ref(['唱歌','跳舞','滑冰'])</script>4.數(shù)組從父組件中為子組件傳遞數(shù)組類型的props數(shù)據(jù)，示例代碼如下。3.5.3動態(tài)綁定props<template><Child:init=“{height:'180厘米’,weight:'70千克'}"/><Child:height="bodyInfo.height":weight="bodyInfo.weight"/><Childv-bind="bodyInfo"/></template>5.對象從父組件中為子組件傳入一個對象類型的props數(shù)據(jù)，或者將對象中的部分屬性作為被傳入的props數(shù)據(jù)，示例代碼如下。3.5.3動態(tài)綁定props<scriptsetup>importChildfrom'./Child.vue'import{reactive}from'vue'constbodyInfo=reactive({height:'180厘米',weight:'70千克'})</script>>>接上頁代碼3.5.3動態(tài)綁定propsprops單向數(shù)據(jù)流在Vue中，所有的props都遵循單向數(shù)據(jù)流原則，props數(shù)據(jù)因父組件的更新而變化，變化后的數(shù)據(jù)將向下流往子組件，而且不會逆向傳遞，這樣可以防止因子組件意外變更props導(dǎo)致數(shù)據(jù)流向難以理解的問題。每次父組件綁定的props發(fā)生變更時，子組件中的props都將會刷新為最新的值。開發(fā)者不應(yīng)該在子組件內(nèi)部改變props，如果這樣做，Vue會在瀏覽器的控制臺中發(fā)出警告。掌握驗證props的方法，能夠?qū)母附M件傳遞過來的props數(shù)據(jù)進行合法性校驗3.5.4驗證props

先定一個小目標！3.5.4驗證props在封裝組件時，可以在子組件中對從父組件傳遞過來的props數(shù)據(jù)進行合法性校驗，從而防止出現(xiàn)數(shù)據(jù)不合法的問題。3.5.4驗證props使用字符串數(shù)組形式的props的缺點是無法為每個prop指定具體的數(shù)據(jù)類型，而使用對象形式的props的優(yōu)點是可以對每個prop進行數(shù)據(jù)類型的校驗。對象形式的props可以使用多種驗證方案，包括基礎(chǔ)類型檢查、必填項的校驗、屬性默認值、自定義驗證函數(shù)等。在聲明props時，可以添加驗證方案。1.基礎(chǔ)類型檢查在開發(fā)中，有時需要對從父組件中傳遞過來的props數(shù)據(jù)進行基礎(chǔ)類型檢查，這時可以通過type屬性檢查合法的類型，如果從父組件中傳遞過來的值不符合此類型，則會報錯。常見的類型有String（字符串）、Number（數(shù)字）、Boolean（布爾值）、Array（數(shù)組）、Object（對象）、Date（日期）、Function（函數(shù)）、Symbol（符號）以及任何自定義構(gòu)造函數(shù)。3.5.4驗證propsprops:{

自定義屬性A:String, //字符串自定義屬性B:Number, //數(shù)字自定義屬性C:Boolean, //布爾值自定義屬性D:Array, //數(shù)組自定義屬性E:Object, //對象自定義屬性F:Date, //日期自定義屬性G:Function, //函數(shù)自定義屬性H:Symbol, //符號}為props指定基礎(chǔ)類型檢查，示例代碼如下。3.5.4驗證propsprops:{

自定義屬性:{type:Number},}通過配置對象的形式定義驗證規(guī)則，示例代碼如下。3.5.4驗證propsprops:{

自定義屬性:{type:[String,Array]},//字符串或數(shù)組}如果某個prop的類型不唯一，可以通過數(shù)組的形式為其指定多個可能的類型，示例代碼如下。2.必填項的校驗父組件向子組件傳遞props數(shù)據(jù)時，有可能傳遞的數(shù)據(jù)為空，但是在子組件中要求該數(shù)據(jù)是必須傳遞的。此時，可以在聲明props時通過required屬性設(shè)置必填項，強調(diào)組件的使用者必須傳遞屬性的值，示例代碼如下。3.5.4驗證propsprops:{

自定義屬性:{required:true},}3.屬性默認值在聲明props時，可以通過default屬性定義屬性默認值，當父組件沒有向子組件的屬性傳遞數(shù)據(jù)時，屬性將會使用默認值，示例代碼如下。3.5.4驗證propsprops:{

自定義屬性:{default:0},}4.自定義驗證函數(shù)如果需要對從父組件中傳入的數(shù)據(jù)進行驗證，可以通過validator()函數(shù)來實現(xiàn)。validator()函數(shù)可以將prop的值作為唯一參數(shù)傳入自定義驗證函數(shù)，如果驗證失敗，則會在控制臺中發(fā)出警告。為prop屬性指定自定義驗證函數(shù)的示例代碼如下。3.5.4驗證propsprops:{

自定義屬性:{validator(value){return['success','warning','danger'].indexOf(value)!==-1;},},}子組件向父組件傳遞數(shù)據(jù)3.6掌握在子組件中聲明自定義事件的方法，能夠在子組件中聲明自定義事件3.6.1在子組件中聲明自定義事件

先定一個小目標！<script>exportdefault{emits:['demo']}</script>若想使用自定義事件，首先需要在子組件中聲明自定義事件。在不使用setup語法糖時，可以通過emits選項聲明自定義事件，示例代碼如下。3.6.1在子組件中聲明自定義事件<scriptsetup>constemit=defineEmits(['demo'])</script>在使用setup語法糖時，需要通過調(diào)用defineEmits()函數(shù)聲明自定義事件，示例代碼如下。3.6.1在子組件中聲明自定義事件在上述代碼中，defineEmits()函數(shù)的參數(shù)與emits選項中的相同。3.6.2在子組件中觸發(fā)自定義事件

先定一個小目標！掌握在子組件中觸發(fā)自定義事件的方法，能夠在子組件中觸發(fā)自定義事件在子組件中聲明自定義事件后，接著需要在子組件中觸發(fā)自定義事件。當使用場景簡單時，可以使用內(nèi)聯(lián)事件處理器，通過調(diào)用$emit()方法觸發(fā)自定義事件，將數(shù)據(jù)傳遞給使用的組件，示例代碼如下。<button@click="$emit('demo',1)">按鈕</button>在上述代碼中，$emit()方法的第1個參數(shù)為字符串類型的自定義事件的名稱，第2個參數(shù)為需要傳遞的數(shù)據(jù)，當觸發(fā)當前組件的事件時，該數(shù)據(jù)會傳遞給父組件。3.6.2在子組件中觸發(fā)自定義事件exportdefault{setup(props,ctx){constupdate=()=>{ctx.emit('demo',2)}return{update}}}除了使用內(nèi)聯(lián)方式外，還可以直接定義方法來觸發(fā)自定義事件。在不使用setup語法糖時，可以從setup()函數(shù)的第2個參數(shù)（即setup上下文對象）來訪問到emit()方法，示例代碼如下。3.6.2在子組件中觸發(fā)自定義事件<scriptsetup>constupdate=()=>{emit('demo',2)}</script>如果使用setup語法糖，可以調(diào)用emit()函數(shù)來實現(xiàn)，示例代碼如下。3.6.2在子組件中觸發(fā)自定義事件3.6.3在父組件中監(jiān)聽自定義事件

先定一個小目標！掌握在父組件中監(jiān)聽自定義事件的方法，能夠在父組件中監(jiān)聽自定義事件在父組件中通過v-on可以監(jiān)聽子組件中拋出的事件，示例代碼如下。<子組件名@demo="fun"/>在上述代碼中，當觸發(fā)demo事件時，會接收到從子組件中傳遞的參數(shù)，同時會執(zhí)行fun()方法。父組件可以通過value屬性接收從子組件中傳遞來的參數(shù)。在父組件中定義fun()方法，示例代碼如下。3.6.3在父組件中監(jiān)聽自定義事件constfun=value=>{console.log(value)}步驟1創(chuàng)建src\components\CustomSubComponent.vue文件，用于展示子組件的相關(guān)內(nèi)容。<template><p>count值為：{{count}}</p><button@click="add">加n</button></template><scriptsetup>import{ref}from'vue'constemit=defineEmits(['updateCount'])constcount=ref(1)constadd=()=>{count.value++

emit('updateCount',2)}</script>步驟3步驟23.6.3在父組件中監(jiān)聽自定義事件演示子組件向父組件傳遞數(shù)據(jù)的方法演示子組件向父組件傳遞數(shù)據(jù)的方法創(chuàng)建src\components\CustomEvents.vue文件，用于展示父組件的相關(guān)內(nèi)容。<template><p>父組件當前的值為：{{number}}</p><CustomSubComponent@updateCount="updateEmitCount"/></template><scriptsetup>importCustomSubComponentfrom'./CustomSubComponent.vue'import{ref}from'vue'constnumber=ref(10)constupdateEmitCount=(value)=>{number.value+=value}</script>步驟1步驟3步驟23.6.3在父組件中監(jiān)聽自定義事件步驟1步驟3步驟2修改src\main.js文件，切換頁面中顯示的組件。importAppfrom'./components/CustomEvents.vue'3.6.3在父組件中監(jiān)聽自定義事件演示子組件向父組件傳遞數(shù)據(jù)的方法保存上述代碼后，在瀏覽器中訪問:5173/，初始頁面效果如下圖所示。3.6.3在父組件中監(jiān)聽自定義事件單擊“加n”按鈕后的頁面效果如下圖所示。3.6.3在父組件中監(jiān)聽自定義事件跨級組件之間的數(shù)據(jù)傳遞3.7掌握跨級組件之間的傳遞數(shù)據(jù)的方法，能夠使用依賴注入實現(xiàn)數(shù)據(jù)共享3.7跨級組件之間的數(shù)據(jù)傳遞

先定一個小目標！如何實現(xiàn)跨級組件之間的數(shù)據(jù)傳遞？3.7跨級組件之間的數(shù)據(jù)傳遞Vue提供了跨級組件之間數(shù)據(jù)傳遞的方式——依賴注入。一個父組件相對于其所有的后代組件而言，可作為依賴提供者。而任何后代的組件樹，無論層級多深，都可以注入由父組件提供的依賴。對于父組件而言，如果要為后代組件提供數(shù)據(jù)，需要使用provide()函數(shù)。對于子組件而言，如果想要注入上層組件或整個應(yīng)用提供的數(shù)據(jù)，需要使用inject()函數(shù)。3.7跨級組件之間的數(shù)據(jù)傳遞1.provide()函數(shù)provide()函數(shù)可以提供一個值，用于被后代組件注入。provide()函數(shù)的語法格式如下。provide(注入名,注入值)provide()函數(shù)可以接收2個參數(shù)，第1個參數(shù)是注入名，后代組件會通過注入名查找所需的注入值；第2個參數(shù)是注入值，值可以是任意類型，包括響應(yīng)式數(shù)據(jù)，例如通過ref()函數(shù)創(chuàng)建的數(shù)據(jù)。3.7跨級組件之間的數(shù)據(jù)傳遞<script>import{ref,provide}from'vue'exportdefault{setup(){constcount=ref(1)provide('message',count)}}</script>在不使用setup語法糖的情況下，provide()函數(shù)必須在組件的setup()函數(shù)中調(diào)用。使用provide()函數(shù)的示例代碼如下。3.7跨級組件之間的數(shù)據(jù)傳遞<scriptsetup>import{provide}from'vue'provide('message','HelloVue.js')</script>當使用setup語法糖時，使用provide()函數(shù)的示例代碼如下。constapp=createApp(App)vide('message','HelloVue.js')provide()函數(shù)除了可以在某個組件中提供依賴外，還可以全局提供依賴。例如，在src\main.js文件中添加全局依賴，示例代碼如下3.7跨級組件之間的數(shù)據(jù)傳遞2.inject()函數(shù)通過inject()函數(shù)可以注入上層組件或者整個應(yīng)用提供的數(shù)據(jù)。inject()函數(shù)的語法格式如下。inject(注入值,默認值,布爾值)inject()函數(shù)有3個參數(shù)。第1個參數(shù)是注入值，Vue會遍歷父組件，通過匹配注入的值來確定所提供的值，如果父組件鏈上多個組件為同一個數(shù)據(jù)提供了值，那么距離更近的組件將會覆蓋更遠的組件所提供的值。3.7跨級組件之間的數(shù)據(jù)傳遞第2個參數(shù)是可選的，用于在沒有匹配到注入的值時使用默認值。第2個參數(shù)可以是工廠函數(shù)，用于返回某些創(chuàng)建起來比較復(fù)雜的值。如果提供的默認值是函數(shù)，還需要將false作為第3個參數(shù)傳入，表明這個函數(shù)就是默認值，而不是工廠函數(shù)。第3個參數(shù)是可選的，類型為布爾值，當參數(shù)值為false時，表示默認值是函數(shù)；當參數(shù)值為true時，表示默認值為工廠函數(shù)；當省略參數(shù)值時，表示默認值為其他類型的數(shù)據(jù)，不是函數(shù)或工廠函數(shù)。3.7跨級組件之間的數(shù)據(jù)傳遞<script>import{inject}from'vue';exportdefault{setup(){constcount=inject('count')constfoo=inject('foo','defaultvalue')

constbaz=inject('foo',()=>newMap())constfn=inject('function',()=>{},false)}}</script>在不使用setup語法糖的情況下，inject()函數(shù)必須在組件的setup()函數(shù)中調(diào)用。使用inject()函數(shù)的示例代碼如下。3.7跨級組件之間的數(shù)據(jù)傳遞<scriptsetup>import{inject}from'vue';constcount=inject('count')</script>當使用setup語法糖時，使用inject()函數(shù)的示例代碼如下。3.7跨級組件之間的數(shù)據(jù)傳遞步驟1創(chuàng)建src\components\ProvideChildren.vue文件，用于展示子組件中的相關(guān)內(nèi)容。步驟3步驟4步驟2步驟5演示跨級組件之間的數(shù)據(jù)傳遞<template><div>子組件</div></template>3.7跨級組件之間的數(shù)據(jù)傳遞步驟1步驟3步驟4步驟2步驟5演示跨級組件之間的數(shù)據(jù)傳遞創(chuàng)建src\components\ProvideParent.vue文件，用于展示父組件中的相關(guān)內(nèi)容。<template><div>父組件</div><hr><ProvideChildren/></template><scriptsetup>importProvideChildrenfrom'./ProvideChildren.vue'</script>3.7跨級組件之間的數(shù)據(jù)傳遞步驟3步驟4步驟2步驟5步驟1演示跨級組件之間的數(shù)據(jù)傳遞創(chuàng)建src\components\ProvideGrand.vue文件，用于展示父組件的父組件（即爺爺組件）中的相關(guān)內(nèi)容<template><div>爺爺組件</div><hr><ProvideParent/></template><scriptsetup>importProvideParentfrom'./ProvideParent.vue'import{ref,provide}from'vue'letmoney=ref(1000)letupdateMoney=(value)=>{money.value+=value}provide('money',money)provide('updateMoney',updateMoney)</script>3.7跨級組件之間的數(shù)據(jù)傳遞步驟3步驟4步驟2步驟5步驟1修改src\components\ProvideChildren.vue文件，通過inject()函數(shù)接收爺爺組件中傳過來的數(shù)據(jù)。<template><div>子組件</div><hr>從爺爺組件接收到的資金：{{money}}<button@click="updateMoney(500)">單擊按鈕增加資金</button></template><scriptsetup>import{inject}from'vue'letmoney=inject('money')letupdateMoney=inject('updateMoney')</script>演示跨級組件之間的數(shù)據(jù)傳遞3.7跨級組件之間的數(shù)據(jù)傳遞步驟3步驟4步驟2步驟5步驟1修改src\main.js文件，切換頁面中顯示的組件。importAppfrom'./components/ProvideGrand.vue'演示跨級組件之間的數(shù)據(jù)傳遞3.7跨級組件之間的數(shù)據(jù)傳遞保存上述代碼后，在瀏覽器中訪問:5173/，初始頁面效果如下圖所示。3.7跨級組件之間的數(shù)據(jù)傳遞單擊“單擊按鈕增加資金”按鈕后頁面效果如下圖所示。3.7跨級組件之間的數(shù)據(jù)傳遞階段案例——待辦事項3.8掌握待辦事項，能夠?qū)崿F(xiàn)待辦事項的開發(fā)3.8階段案例——待辦事項

先定一個小目標！在日常生活中，人們通常傾向于對生活和工作進行提前規(guī)劃，這樣可以更合理地對時間進行劃分，從而提高效率。本節(jié)將通過講解待辦事項案例，使讀者鞏固所學的Vue中組件的使用、數(shù)據(jù)共享等知識點。3.8階段案例——待辦事項“待辦事項”案例的頁面結(jié)構(gòu)分為上、中、下3個部分，上半部分為輸入?yún)^(qū)域，中部為列表區(qū)域，下半部分為任務(wù)狀態(tài)區(qū)域。1.初始頁面效果3.8階段案例——待辦事項在文本框中輸入內(nèi)容后，在鍵盤上按下回車鍵，即可添加任務(wù)到待辦列表中，添加“完成Vue.js第2章課后題”任務(wù)后的頁面效果如下圖所示。2.新增任務(wù)3.8階段案例——待辦事項單擊“晨練”任務(wù)右側(cè)的“×”按鈕，即可刪除該任務(wù)。當鼠標指針移入列表區(qū)域中“晨練”任務(wù)時，頁面效果如下圖所示。3.刪除任務(wù)3.8階段案例——待辦事項在本案例中，任務(wù)狀態(tài)分為全部任務(wù)、待辦任務(wù)、已辦任務(wù)3種。單擊待辦任務(wù)前的復(fù)選框，即可將待辦任務(wù)狀態(tài)改為已完成，并將該任務(wù)添加到已辦任務(wù)中。4.切換任務(wù)狀態(tài)在任務(wù)狀態(tài)區(qū)域左側(cè)會展示任務(wù)的總條數(shù)。5.展示任務(wù)數(shù)的條數(shù)3.8階段案例——待辦事項單擊任務(wù)狀態(tài)區(qū)域的“All”“Active”“Completed”分別會切換到全部任務(wù)、待辦任務(wù)、已辦任務(wù)列表。默認情況下，任務(wù)狀態(tài)區(qū)域會展示全部任務(wù)。待辦任務(wù)列表如下圖所示。6.切換任務(wù)列表3.8階段案例——待辦事項已辦任務(wù)列表如下圖所示。7.切換任務(wù)列表3.8階段案例——待辦事項本章小結(jié)本章主要講解了Vue中組件的基礎(chǔ)知識，內(nèi)容主要包括選項式API和組合式API、生命周期函數(shù)、組件的注冊和引用、解決組件之間的樣式?jīng)_突、父組件向子組件傳遞數(shù)據(jù)、子組件向父組件傳遞數(shù)據(jù)和跨級組件之間的數(shù)據(jù)傳遞，最后通過“待辦事項”案例的開發(fā)，對組件知識進行了綜合運用。通過本章的學習，讀者能夠?qū)ue的組件有整體的認識，能夠利用組件進行項目開發(fā)。本章小結(jié)第4章組件基礎(chǔ)（下）《Vue.js前端開發(fā)實戰(zhàn)（第2版）》學習目標/Target掌握動態(tài)組件的使用方法，能夠?qū)崿F(xiàn)動態(tài)組件的渲染掌握KeepAlive組件的使用方法，能夠使用<KeepAlive>標簽完成組件緩存熟悉KeepAlive組件的常用屬性，能夠說明各個屬性的作用掌握組件緩存相關(guān)的生命周期函數(shù)，能夠在對應(yīng)的生命周期函數(shù)中執(zhí)行相應(yīng)的動作掌握什么是插槽，能夠定義和使用插槽學習目標/Target掌握具名插槽的使用方法，能夠通過name屬性定義具名插槽掌握作用域插槽的使用方法，能夠在父組件中使用子組件中的數(shù)據(jù)掌握私有自定義指令的使用方法，能夠獨立完成私有自定義指令的聲明和使用了解什么是自定義指令，能夠說出自定義指令的概念和分類學習目標/Target

掌握為自定義指令綁定參數(shù)的使用方法，能夠通過等號（=）的方式，為當前指

令綁定參數(shù)掌握引用靜態(tài)資源的方法，能夠引用public和src\assets目錄下的靜態(tài)資源掌握自定義指令的函數(shù)形式，能夠使用函數(shù)形式簡化自定義指令的聲明掌握全局自定義指令的使用方法，能夠使用對象形式和函數(shù)形式來聲明全局自

定義指令章節(jié)概述/Summary通過第3章的學習，相信讀者對組件的基礎(chǔ)知識已經(jīng)有了一定的了解。接下來，本章將繼續(xù)對組件的基礎(chǔ)知識進行講解，主要包括動態(tài)組件、插槽、自定義指令和引用靜態(tài)資源，學習這些內(nèi)容，可以幫助讀者更靈活地運用組件來開發(fā)Vue項目。目錄/Contents4.14.24.3動態(tài)組件插槽自定義指令4.4引用靜態(tài)資源4.5階段案例——商品管理動態(tài)組件4.1掌握動態(tài)組件的使用方法，能夠?qū)崿F(xiàn)動態(tài)組件的渲染4.1.1定義動態(tài)組件

先定一個小目標！4.1.1定義動態(tài)組件<component:is="要渲染的組件"></component>利用動態(tài)組件可以動態(tài)切換頁面中顯示的組件。使用<component>標簽可以定義動態(tài)組件，語法格式如下。上述語法格式中，<component>標簽必須配合is屬性一起使用，is屬性的屬性值表示要渲染的組件，當該屬性值發(fā)生變化時，頁面中渲染的組件也會發(fā)生變化。is屬性的屬性值可以是字符串或組件，當屬性值為組件時，如果要實現(xiàn)組件的切換，需要調(diào)用shallowRef()函數(shù)定義響應(yīng)式數(shù)據(jù)，將組件保存為響應(yīng)式數(shù)據(jù)。shallowRef()函數(shù)只處理對象最外層屬性的響應(yīng)，它比ref()函數(shù)更適合于將組件保存為響應(yīng)式數(shù)據(jù)。4.1.1定義動態(tài)組件步驟1打開命令提示符，切換到D:\vue\chapter04目錄，在該目錄下執(zhí)行如下命令，創(chuàng)建項目。步驟3步驟4步驟2步驟5演示動態(tài)組件的使用方法yarncreatevitecomponent_foundation--templatevue4.1.1定義動態(tài)組件演示動態(tài)組件的使用方法項目創(chuàng)建完成后，執(zhí)行如下命令進入項目目錄，啟動項目。cdcomponent_foundationyarnyarndev步驟1步驟3步驟4步驟2步驟54.1.1定義動態(tài)組件演示動態(tài)組件的使用方法步驟3步驟4步驟2步驟5步驟1使用VSCode編輯器打開D:\vue\chapter04\component_foundation目錄。4.1.1定義動態(tài)組件演示動態(tài)組件的使用方法步驟3步驟4步驟2步驟5步驟1將src\style.css文件中的樣式代碼全部刪除。4.1.1定義動態(tài)組件演示動態(tài)組件的使用方法步驟3步驟4步驟2步驟5步驟1創(chuàng)建src\components\MyLeft.vue文件。<template>MyLeft組件</template>4.1.1定義動態(tài)組件步驟6創(chuàng)建src\components\MyRight.vue文件。<template>MyRight組件</template>步驟8步驟7演示動態(tài)組件的使用方法4.1.1定義動態(tài)組件創(chuàng)建src\components\DynamicComponent.vue文件，在該文件中導(dǎo)入并使用MyLeft和MyRight組件，實現(xiàn)單擊按鈕時動態(tài)切換組件的效果。<template><button@click="showComponent=MyLeft">展示MyLeft組件</button><button@click="showComponent=MyRight">展示MyRight組件</button><div><component:is="showComponent"></component></div></template><scriptsetup>importMyLeftfrom'./MyLeft.vue'importMyRightfrom'./MyRight.vue'import{shallowRef}from'vue'constshowComponent=shallowRef(MyLeft)</script>步驟6步驟8步驟7演示動態(tài)組件的使用方法4.1.1定義動態(tài)組件步驟6步驟8步驟7修改s