Vue.js 超詳細(xì)入門(mén)與項(xiàng)目實(shí)戰(zhàn)（微課視頻版）課件 第06章 組件

第6章組件課件V1.0

教學(xué)內(nèi)容第一節(jié)

什么是組件第二節(jié)組件使用第三節(jié)組件屬性第四節(jié)組件事件知識(shí)目標(biāo)教學(xué)目標(biāo)理解和掌握定義組件的方法和流程理解組件中屬性的定義和使用原理掌握組件中事件驗(yàn)證和傳參的方法知識(shí)點(diǎn)預(yù)覽#節(jié)知識(shí)點(diǎn)難點(diǎn)重點(diǎn)應(yīng)用6C06-01什么是組件1、單文件組件

2、JavaScript對(duì)象C06-02組件使用1、全局注冊(cè)2、局部注冊(cè)3、組件命名格式C06-03組件屬性1、屬性定義2、屬性驗(yàn)證3、屬性值傳遞C06-04組件事件1、事件定義2、事件驗(yàn)證3、事件監(jiān)聽(tīng)和傳參 單文件組件簡(jiǎn)稱(chēng)為（SFC），它是指在使用腳手架構(gòu)建項(xiàng)目時(shí)，自動(dòng)生成的一個(gè)擴(kuò)展名為.vue的單獨(dú)文件，而在這個(gè)文件中，就是一個(gè)定義好的Vue組件。<template><div>{{tip}}</div></template><script>exportdefault{name:"Base",data(){return{tip:"今天的天氣非常不錯(cuò)！"}}}</script>

單文件組件

在js文件中定義一個(gè)包含Vue特定選項(xiàng)的JavaScript對(duì)象，這也是定義了一個(gè)Vue組件。exportdefault{data(){return{tip:"今天的天氣非常不錯(cuò)！"}},template:`<div>{{tip}}</div>`}

在上述js文件的代碼中，定義的組件默認(rèn)是使用exportdefault方法導(dǎo)出自己，模板是一個(gè)內(nèi)聯(lián)的JavaScript字符串變量，Vue在執(zhí)行時(shí)會(huì)自動(dòng)編譯它，成為組件的模板部分。JavaScript對(duì)象

全局注冊(cè)組件的方式非常簡(jiǎn)單，只需要調(diào)用Vue應(yīng)用實(shí)例中的component()方法，就可以注冊(cè)一個(gè)在當(dāng)前Vue應(yīng)用實(shí)例中都可以使用的全局組件，具體實(shí)現(xiàn)步驟如下：1、先定義一個(gè)名稱(chēng)為Global.vue，用于全局注冊(cè)的組件2、在main.js文件中，調(diào)用component()方法將定義的組件注冊(cè)為全局組件3、在任意一個(gè)組件，如App.vue中，直接調(diào)用注冊(cè)成功的全局組件

在第2個(gè)步驟中，調(diào)用Vue應(yīng)用實(shí)例化對(duì)象的component()方法時(shí)，需傳入兩個(gè)參數(shù)，第一個(gè)是指這個(gè)全局組件的名稱(chēng)，第二個(gè)是指這個(gè)全局組件所對(duì)應(yīng)的目標(biāo)組件，通常是已定義完成的組件。component()方法可以采用鏈?zhǔn)椒绞骄帉?xiě)，注冊(cè)多個(gè)全局組件。最后，各個(gè)被注冊(cè)的全局組件之間也可以相互調(diào)用，因此，上述代碼中的三個(gè)被注冊(cè)的全局組件內(nèi)部是可以相互訪(fǎng)問(wèn)的。全局注冊(cè)

相比于全局注冊(cè)的組件，局部組件必須在父組件中顯式聲明，組件間的依賴(lài)關(guān)系更加清晰，對(duì)打包文件的優(yōu)化更加友好，注冊(cè)方式也更加簡(jiǎn)單，只需要以下兩個(gè)步驟。1、先定義一個(gè)名稱(chēng)為L(zhǎng)ocal.vue，用于局部注冊(cè)的組件2、在任意一個(gè)組件，如App.vue中，導(dǎo)入新建的組件，并使用components選項(xiàng)，聲明導(dǎo)入的組件，完成局部組件注冊(cè)的功能

此外，局部注冊(cè)的組件只能在注冊(cè)的父組件中使用，并不能運(yùn)用到它的子組件或后代組件，即局部組件只對(duì)顯式的注冊(cè)有效，而對(duì)后代組件無(wú)效。局部組件在注冊(cè)組件時(shí)，有下列二種命名格式。1、短橫線(xiàn)分隔（kebab-case）ponent('custom-component-name',{/*...*/})2、首字母大寫(xiě)（PascalCase）ponent('CustomComponentName',{/*...*/})官方提倡使用首字母大寫(xiě)格式，因?yàn)樗且粋€(gè)合法的JavaScript標(biāo)識(shí)符，可以很容易地導(dǎo)入和注冊(cè)到組件中，將系統(tǒng)自帶的Vue組件和自定義元素區(qū)分開(kāi)。組件命名格式

組件屬性的定義需要使用props選項(xiàng)來(lái)完成，選項(xiàng)的值可以是一個(gè)字符型數(shù)組，也可以是一個(gè)對(duì)象的形式。除了數(shù)組形式定義屬性外，還可以使用對(duì)象的方式來(lái)定義組件的屬性。官方建議使用對(duì)象的形式去定義一個(gè)組件的屬性，因?yàn)檫@種形式定義組件屬性時(shí)，對(duì)象中的key表示屬性名稱(chēng)，屬性值就是屬性名聲明類(lèi)型的構(gòu)造函數(shù)；此外，這種形式定義屬性時(shí)，還可以設(shè)置該屬性是否需要驗(yàn)證。屬性定義

屬性驗(yàn)證是指在聲明組件屬性時(shí)，如果屬性不滿(mǎn)足聲明時(shí)定義的規(guī)則，將會(huì)在控制臺(tái)輸出相應(yīng)的錯(cuò)誤提示信息，這種驗(yàn)證功能有助于組件開(kāi)發(fā)人員查看屬性值傳入的是否符合規(guī)范，進(jìn)一步跟蹤傳入組件的數(shù)據(jù)。

屬性驗(yàn)證

組件所有屬性默認(rèn)都是可選的，除非將屬性的require選項(xiàng)設(shè)置為true，一個(gè)可選項(xiàng)的屬性默認(rèn)未傳遞的值是undefined，如果是布爾型，則默認(rèn)為false。如果想強(qiáng)化未傳遞時(shí)的默認(rèn)值，則可以在屬性中添加default選項(xiàng)來(lái)設(shè)置。如果需要修改傳入的屬性值，則可以將該屬性值保存到另外一個(gè)變量中，保存后，則可以任意操作這個(gè)保存的變量，以實(shí)現(xiàn)修改的功能。

組件的命名官方推薦使用首字母大寫(xiě)的格式，因?yàn)檫@種格式有利于提高模板的可讀性，而組件屬性的命名官方建議使用短橫線(xiàn)分隔的格式，因?yàn)檫@樣的格式更加貼近HTML元素書(shū)寫(xiě)的風(fēng)格。屬性值傳遞

如果需要給組件添加事件，可以使用emits選項(xiàng)進(jìn)行顯示聲明。聲明的方式有兩種，一種是數(shù)組格式，一種是對(duì)象格式。

事件名官方推薦使用駝峰語(yǔ)法（camelCase）來(lái)聲明，以便于在父組件調(diào)用時(shí)，可以使用短橫線(xiàn)分隔格式監(jiān)聽(tīng)組件的事件，父組件使用v-on或@來(lái)監(jiān)聽(tīng)子組件的事件，如下所示。<template><myComponent@my-clk="fn"v-on:myFocus="fn2"></myComponent></template>事件定義

與驗(yàn)證屬性相同，驗(yàn)證事件必須在組件定義時(shí)，以對(duì)象的形式來(lái)描述；在對(duì)象中，事件被賦值給一個(gè)函數(shù)，函數(shù)的參數(shù)作為執(zhí)行事件時(shí)的實(shí)參，通過(guò)驗(yàn)證傳入實(shí)參的有效性，來(lái)決定函數(shù)返回true或false，從而完成事件執(zhí)行時(shí)合法性的驗(yàn)證。事件驗(yàn)證

組件事件的監(jiān)聽(tīng)是指當(dāng)子組件聲