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

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

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

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

和深度選擇器解決組件之間樣式沖突的問題掌握跨級組件之間的傳遞數據的方法，能夠使用依賴注入實現數據共享掌握父組件向子組件傳遞數據的方法，能夠使用props實現數據傳遞

掌握子組件向父組件傳遞數據的方法，能夠使用自定義事件實現數據傳遞章節(jié)概述/Summary在學習完第2章的基礎知識后，讀者應該已經可以編寫一些簡單的組件了，但是這樣的組件功能比較簡單，無法滿足實際項目開發(fā)中各種復雜的需求。為了能夠更靈活地使用組件，讀者還需要更深入地學習組件的相關知識。本書將用第3章和第4章共兩章的篇幅詳細講解組件基礎，本章為上半部分內容。目錄/Contents3.13.23.3選項式API和組合式API生命周期函數組件的注冊和引用3.4解決組件之間的樣式沖突目錄/Contents3.53.63.7父組件向子組件傳遞數據子組件向父組件傳遞數據跨級組件之間的數據傳遞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是將組件中的數據、方法、計算屬性、偵聽器等代碼全部組合在一起，寫在setup()函數中。3.1選項式API和組合式API<script>exportdefault{data(){return{//定義數據}},methods:{//定義方法},computed:{//定義計算屬性},watch:{//定義偵聽器}}</script>選項式API的語法格式如下。3.1選項式API和組合式API<script>import{computed,watch}from'vue'exportdefault{setup(){const數據名=數據值const方法名=()=>{}

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

watch(偵聽器的來源,回調函數,可選參數)return{數據名,方法名,計算屬性名}}}</script>組合式API的語法格式如下。3.1選項式API和組合式API<scriptsetup>import{computed,watch}from'vue'//定義數據const數據名=數據值//定義方法const方法名=()=>{}//定義計算屬性const計算屬性名=computed(()=>{})//定義偵聽器watch(偵聽器的來源,回調函數,可選參數)</script>Vue還提供了setup語法糖，用于簡化組合式API的代碼。使用setup語法糖時，組合式API的語法格式如下。3.1選項式API和組合式API選項式API和組合式API的關系Vue提供的選項式API和組合式API這兩種寫法可以覆蓋大部分的應用場景，它們是同一底層系統(tǒng)所提供的兩套不同的接口。選項式API是在組合式API的基礎上實現的。3.1選項式API和組合式API企業(yè)在開發(fā)大型項目時，隨著業(yè)務復雜度的增加，代碼量會不斷增加。如果使用選項式API，整個項目邏輯不易閱讀和理解，而且查找對應功能的代碼會存在一定難度。如果使用組合式API，可以將項目的每個功能的數據、方法放到一起，這樣不管項目的大小，都可以快速定位到功能區(qū)域的相關代碼，便于閱讀和維護。同時，組合式API可以通過函數來實現高效的邏輯復用，這種形式更加自由，需要開發(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)建時自帶的樣式代碼影響本案例的實現效果。演示選項式API和組合式API的使用方法3.1選項式API和組合式API步驟3步驟4步驟2步驟5步驟1創(chuàng)建src\components\OptionsAPI.vue文件，用于演示選項式API的寫法，在該文件中實現單擊“+1”按鈕使數字加1的效果。<template><div>數字：{{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實現的初始頁面效果如下圖所示。3.1選項式API和組合式API單擊“+1”按鈕后的頁面效果如下圖所示。從上圖可以看出，單擊“+1”按鈕后，數字變?yōu)?，說明通過選項式API的寫法實現數字加1的效果成功。3.1選項式API和組合式API步驟6步驟7創(chuàng)建src\components\CompositionAPI.vue文件，用于演示組合式API的寫法，在該文件中實現單擊“+1”按鈕使數字加1的效果。<template><div>數字：{{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實現的初始頁面效果相同。3.1選項式API和組合式API生命周期函數3.2掌握生命周期函數的使用方法，能夠靈活運用生命周期函數在特定時間執(zhí)行特定的操作3.2生命周期函數

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

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

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

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

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

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

引用組件

先定一個小目標！將組件注冊完成后，若要將組件在頁面中渲染出來，需要引用組件。在組件的<template>標簽中可以引用其他組件，被引用的組件需要寫成標簽的形式，標簽名應與組件名對應。組件的標簽名可以使用短橫線分隔或帕斯卡命名法命名。例如，<my-component>標簽和<MyComponent>標簽都表示引用MyComponent組件。一個組件可以被引用多次，但不可出現自我引用和互相引用的情況，否則會出現死循環(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文件，導入GlobalComponent組件并調用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文件，添加代碼導入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

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

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

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

自定義屬性A:類型,

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

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

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

先定一個小目標！在父組件中使用v-bind可以為子組件動態(tài)綁定props，任意類型的值都可以傳給子組件的props，包括字符串、數字、布爾值、數組、對象等。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數據，示例代碼如下。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.數字從父組件中為子組件傳遞數字類型的props數據，示例代碼如下。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數據，示例代碼如下。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.數組從父組件中為子組件傳遞數組類型的props數據，示例代碼如下。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數據，或者將對象中的部分屬性作為被傳入的props數據，示例代碼如下。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單向數據流在Vue中，所有的props都遵循單向數據流原則，props數據因父組件的更新而變化，變化后的數據將向下流往子組件，而且不會逆向傳遞，這樣可以防止因子組件意外變更props導致數據流向難以理解的問題。每次父組件綁定的props發(fā)生變更時，子組件中的props都將會刷新為最新的值。開發(fā)者不應該在子組件內部改變props，如果這樣做，Vue會在瀏覽器的控制臺中發(fā)出警告。掌握驗證props的方法，能夠對從父組件傳遞過來的props數據進行合法性校驗3.5.4驗證props

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

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

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

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

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

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

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

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

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

先定一個小目標！掌握在父組件中監(jiān)聽自定義事件的方法，能夠在父組件中監(jiān)聽自定義事件在父組件中通過v-on可以監(jiān)聽子組件中拋出的事件，示例代碼如下。<子組件名@demo="fun"/>在上述代碼中，當觸發(fā)demo事件時，會接收到從子組件中傳遞的參數，同時會執(zhí)行fun()方法。父組件可以通過value屬性接收從子組件中傳遞來的參數。在父組件中定義fun()方法，示例代碼如下。3.6.3在父組件中監(jiān)聽自定義事件constfun=value=>{console.log(value)}步驟1創(chuàng)建src\components\CustomSubComponent.vue文件，用于展示子組件的相關內容。<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)聽自定義事件演示子組件向父組件傳遞數據的方法演示子組件向父組件傳遞數據的方法創(chuàng)建src\components\CustomEvents.vue文件，用于展示父組件的相關內容。<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)聽自定義事件演示子組件向父組件傳遞數據的方法保存上述代碼后，在瀏覽器中訪問:5173/，初始頁面效果如下圖所示。3.6.3在父組件中監(jiān)聽自定義事件單擊“加n”按鈕后的頁面效果如下圖所示。3.6.3在父組件中監(jiān)聽自定義事件跨級組件之間的數據傳遞3.7掌握跨級組件之間的傳遞數據的方法，能夠使用依賴注入實現數據共享3.7跨級組件之間的數據傳遞

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