《Vue.js 前端開發(fā)技術(shù)與實(shí)踐》課件-第6章 組件

第6章組件組件（Component）是Vue最強(qiáng)大的功能之一。組件可重用性高，可減少重復(fù)性的開發(fā)。在Vue中組件是構(gòu)成頁(yè)面中獨(dú)立結(jié)構(gòu)單元，是從UI界面的角度來進(jìn)行劃分的，Vue可以把網(wǎng)頁(yè)分割成很多組件。6.1Vue組件組件（Component）是Vue最強(qiáng)大的功能之一。組件可重用性高，可減少重復(fù)性的開發(fā)。6.2組件定義及調(diào)用6.2.1全局組件的定義及調(diào)用（1）全局組件的定義語(yǔ)法：Vponent('組件的名稱'，{以對(duì)象的形式描述組件的配置選項(xiàng)})①“組件名稱”的命名:規(guī)范中自定義組件名推薦是使用kebab-case(短橫線分隔命名)

②配置選項(xiàng)對(duì)象:選項(xiàng)對(duì)象屬性有data、computed、watch、methods以及生命周期鉤子等③組件的結(jié)構(gòu)模板，模板中只能有一個(gè)根節(jié)點(diǎn)。④Data定義組件的初始數(shù)據(jù)，與newVue的data選項(xiàng)定義不同，組件是可復(fù)用的，所以數(shù)據(jù)要定義為私有的狀態(tài)，必須要把data定義為一個(gè)函數(shù)，并且要求返回一個(gè)對(duì)象。例如：

data:

function

()

{

return

{

msg:

'hello

Vue!'

}

},全局組件，在全局都可以調(diào)用，調(diào)用組件跟使用標(biāo)簽一樣，標(biāo)簽名為組件名即可。（2）全局組件的調(diào)用局部組件是定義在Vue實(shí)例上，在一個(gè)實(shí)例上定義，就在該實(shí)例所掛載的區(qū)域內(nèi)使用，使用配置項(xiàng)components（復(fù)數(shù)），一個(gè)實(shí)例可以配置多個(gè)組件，多個(gè)組件配置在一個(gè)對(duì)象中。6.2.2局部組件的定義及調(diào)用局部組件，只在定義它的實(shí)例所掛載的區(qū)域內(nèi)使用，調(diào)用方法跟全局組件調(diào)用方法相同。語(yǔ)法：components：{

組件名1：{組件配置選項(xiàng)},組件名2：{組件配置選項(xiàng)},……

}6.3組件的層級(jí)關(guān)系網(wǎng)頁(yè)合理分割成很多組件，組件可以嵌套組件，形成組件層級(jí)父子關(guān)系、兄弟關(guān)系。（1）定義全局組件的層級(jí)關(guān)系全局組件的層次關(guān)系是在調(diào)用時(shí)確定的。（2）定義局部組件的層級(jí)關(guān)系局部組件定義層級(jí)關(guān)系，每個(gè)組件都有Components配置選項(xiàng)來配置嵌套下級(jí)組件。6.4組件之間的通訊組件默認(rèn)只能調(diào)用自己的屬性和方法，不能調(diào)用其它組件的屬性和方法，如要調(diào)用就需要用到數(shù)據(jù)通信。6.4.1父組件傳遞數(shù)據(jù)給子組件在子組件中props選項(xiàng)定義屬性來接收父組件傳來的數(shù)據(jù)。在子組件中定義結(jié)構(gòu)，數(shù)據(jù)定義在父組件中，在調(diào)用子組件時(shí)，通過綁定屬性來傳值。Props的值類型可以定義為數(shù)組，用數(shù)組來定義多個(gè)屬性。例：

props:

['msg',

'open'],如定義的屬性需要指定類型檢測(cè)、自定義驗(yàn)證和設(shè)置默認(rèn)值，Props的值類型定義為對(duì)象。props:{//檢測(cè)類型height:Number,//檢測(cè)類型+其他驗(yàn)證

age:{

type:Number,

default:0,

required:true,

validator:function(value){returnvalue>=0}

}}1、在子組件中props選項(xiàng)定義屬性傳遞靜態(tài)或動(dòng)態(tài)的數(shù)據(jù)給在子組件props中定義的屬性。2、在父組件中調(diào)用子組件

<child

msg="小學(xué)"></child>可以用v-bind將動(dòng)態(tài)props綁定到父組件的數(shù)據(jù)。每當(dāng)父組件的數(shù)據(jù)變化時(shí)，該變化也會(huì)傳導(dǎo)給子組件。傳入的值除字符串類型的，其它類型需要v-bind指令綁定屬性。

<child

v-bind:msg='stage'

:open='open'></child>（3）子組件調(diào)用父組件的方法父組件調(diào)用子組件時(shí)通過綁定自定義事件，把方法傳遞給子組件，在子組件中通過$emit觸發(fā)該事件。6.4.2子組件傳遞數(shù)據(jù)給父組件在父組件調(diào)用子組件時(shí)，通過v-on指令綁定一個(gè)自定義事件，在父組件中定義的處理函數(shù)（方法），在子組件中通過$emit觸發(fā)該事件，執(zhí)行該方法，通過傳遞參數(shù)把數(shù)據(jù)傳遞給父組件。（2）使用$refs（1）使用自定義事件在調(diào)用子組件時(shí)使用ref屬性，通過$refs得到ref屬性值對(duì)應(yīng)的組件實(shí)例，得到該實(shí)例后，父組件就有了該子組件的控制權(quán)，可以訪問該子組件的數(shù)據(jù)，調(diào)用該子組件的方法等。6.4.3兄弟之間的數(shù)據(jù)傳遞通過事件總線varbus=newVue()，一個(gè)組件使用bus.$on偵聽事件，另一個(gè)組件使用bus.$emit觸發(fā)事件。事件總線可以用于任何組件之間通信，解決跨級(jí)傳遞的問題。6.5動(dòng)態(tài)組件多個(gè)組件可以使用同一個(gè)掛載點(diǎn)，然后動(dòng)態(tài)地在它們之間切換。使用內(nèi)置組件component，使用該組件的is屬性動(dòng)態(tài)地綁定組件，依is的值，來決定哪個(gè)組件被渲染。6.6內(nèi)置組件keep-alivekeep-alive組件主要用于保留組件狀態(tài)或避免重新渲染。6.7插槽語(yǔ)法:<slotname=”插槽名”v-bind:屬性（prop）=’表達(dá)式’>插槽默認(rèn)的內(nèi)容</slot>（1）在子組件中定義插槽語(yǔ)法：<templatev-slot:插槽名=”數(shù)據(jù)對(duì)象”>插入的內(nèi)容</template>（2）在父組件調(diào)用插槽6.8單個(gè)文件組件單個(gè)文件組件由結(jié)構(gòu)template、樣式