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

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

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

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

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

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

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

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

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

先定一個(gè)小目標(biāo)！什么是生命周期函數(shù)？3.2生命周期函數(shù)在Vue中，組件的生命周期是指每個(gè)組件從被創(chuàng)建到被銷毀的整個(gè)過程，每個(gè)組件都有生命周期。如果想要在某個(gè)特定的時(shí)機(jī)進(jìn)行特定的處理，可以通過生命周期函數(shù)來完成。隨著組件生命周期的變化，生命周期函數(shù)會(huì)自動(dòng)執(zhí)行。3.2生命周期函數(shù)函數(shù)說明onBeforeMount()組件掛載前onMounted()組件掛載成功后onBeforeUpdate()組件更新前onUpdated()組件中的任意的DOM元素更新后onBeforeUnmount()組件實(shí)例被銷毀前onUnmounted()組件實(shí)例被銷毀后組合式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ù)查看在特定時(shí)間點(diǎn)下的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/并打開控制臺(tái)，使用生命周期函數(shù)的頁面效果和控制臺(tái)如下圖所示。3.2生命周期函數(shù)多學(xué)一招：選項(xiàng)式API下的生命周期函數(shù)函數(shù)說明beforeCreate()實(shí)例對(duì)象創(chuàng)建前created()實(shí)例對(duì)象創(chuàng)建后beforeMount()頁面掛載前mounted()頁面掛載成功后beforeUpdate()組件更新前updated()組件中的任意的DOM元素更新后beforeDestroy()組件實(shí)例銷毀前destroyed()組件實(shí)例銷毀后選項(xiàng)式API下的生命周期函數(shù)如下表所示。

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

組件的注冊(cè)和引用3.3掌握注冊(cè)組件的方法，能夠運(yùn)用全局注冊(cè)或者局部注冊(cè)的方式完成組件的注冊(cè)3.3.1注冊(cè)組件

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

引用組件

先定一個(gè)小目標(biāo)！將組件注冊(cè)完成后，若要將組件在頁面中渲染出來，需要引用組件。在組件的<template>標(biāo)簽中可以引用其他組件，被引用的組件需要寫成標(biāo)簽的形式，標(biāo)簽名應(yīng)與組件名對(duì)應(yīng)。組件的標(biāo)簽名可以使用短橫線分隔或帕斯卡命名法命名。例如，<my-component>標(biāo)簽和<MyComponent>標(biāo)簽都表示引用MyComponent組件。一個(gè)組件可以被引用多次，但不可出現(xiàn)自我引用和互相引用的情況，否則會(huì)出現(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()方法全局注冊(cè)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>標(biāo)簽中引用GlobalComponent組件和LocalComponent組件。<divclass="box"><GlobalComponent/><LocalComponent/></div>3.3.2

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

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

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

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

自定義屬性A:類型,

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

先定一個(gè)小目標(biāo)！當(dāng)在父組件中引用了子組件后，如果子組件中聲明了props，則可以在父組件中向子組件傳遞數(shù)據(jù)。如果傳遞的數(shù)據(jù)是固定不變的，則可以通過靜態(tài)綁定props的方式為子組件傳遞數(shù)據(jù)。3.5.2靜態(tài)綁定props<子組件標(biāo)簽名自定義屬性A="數(shù)據(jù)"自定義屬性B="數(shù)據(jù)"/>通過靜態(tài)綁定props的方式為子組件傳遞數(shù)據(jù)，其語法格式如下。在上述語法格式中，父組件向子組件的props傳遞了靜態(tài)的數(shù)據(jù)，屬性值默認(rèn)為字符串類型。3.5.2靜態(tài)綁定props如果子組件中未聲明props，則父組件向子組件中傳遞的數(shù)據(jù)會(huì)被忽略，無法被子組件使用。注意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ù)的頁面效果如下圖所示。掌握父組件向子組件傳遞動(dòng)態(tài)數(shù)據(jù)的方法，能夠使用props實(shí)現(xiàn)數(shù)據(jù)傳遞3.5.3動(dòng)態(tài)綁定props

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

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

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

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

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

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

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

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

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

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

先定一個(gè)小目標(biāo)！掌握在父組件中監(jiān)聽自定義事件的方法，能夠在父組件中監(jiān)聽自定義事件在父組件中通過v-on可以監(jiān)聽子組件中拋出的事件，示例代碼如下。<子組件名@demo="fun"/>在上述代碼中，當(dāng)觸發(fā)demo事件時(shí)，會(huì)接收到從子組件中傳遞的參數(shù)，同時(shí)會(huì)執(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>父組件當(dāng)前的值為：{{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)聽自定義事件跨級(jí)組件之間的數(shù)據(jù)傳遞3.7掌握跨級(jí)組件之間的傳遞數(shù)據(jù)的方法，能夠使用依賴注入實(shí)現(xiàn)數(shù)據(jù)共享3.7跨級(jí)組件之間的數(shù)據(jù)傳遞

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