Vue.js組件構(gòu)建與應(yīng)用時間：匯報人：JavaScript+Vue.js前端開發(fā)任務(wù)驅(qū)動式教程1.組件基礎(chǔ)2.組件注冊與使用3.組件構(gòu)建4.Vue.js組件選項props5.組件之間的通信6.Vue.js插槽應(yīng)用目錄程序開發(fā)框架通常會提供代碼復(fù)用機制，Vue就是通過它的組件來實現(xiàn)局部復(fù)用的。Vue作為一個輕量級前端框架，其核心功能是組件化開發(fā)。Vue通常應(yīng)用腳手架工具VueCLI來開發(fā)和管理組件。在Vue中，單文件組件是用一個文件封裝組件的模板、腳本和樣式的組件。用戶在引用單文件組件時，只需將組件引入并注冊即可使用。組件（Component）是Vue最強大的功能之一，組件可以擴展HTML元素，封裝可重用的代碼。根據(jù)項目需求，可抽象出一些組件。用戶可根據(jù)自己的需要，使用不同的組件來拼接頁面。這種開發(fā)模式使前端頁面易于擴展，減少了重復(fù)編寫代碼，提高了開發(fā)效率，且靈活性高。由于每個組件都擁有自己的作用域，組件之間獨立工作互不影響，因此降低了代碼之間的耦合程度，使項目更易于維護和管理。在Vue中，一個組件本質(zhì)上是一個擁有預(yù)定義選項的Vue實例，主要以頁面結(jié)構(gòu)的形式存在，不同的組件具有不同的基本交互功能，可以根據(jù)業(yè)務(wù)邏輯實現(xiàn)較復(fù)雜的功能。組件是一個自定義元素（或稱為模塊），包括所需的模板、邏輯和樣式。在HTML模板中，組件以標(biāo)簽的形式存在，起到占位符的作用。通過Vue的聲明式渲染，占位符將會被替換為實際的內(nèi)容。組件基礎(chǔ)【例】使用HTML代碼編輯器Dreamweaver創(chuàng)建網(wǎng)頁demo1201.html，在該網(wǎng)頁中編寫代碼，定義與使用一個名為button-counter的組件，該組件的主要功能是記錄與輸出單擊按鈕的次數(shù)。（1）定義一個名為button-counter的組件定義一個名為button-counter的組件的代碼如下。//Vponent()表示注冊組件的API，參數(shù)button-counter為組件名稱//組件名稱與頁面中的標(biāo)簽<button-counter>對應(yīng)//組件名稱可以使用駝峰格式，這里也可設(shè)置為buttonCounterVponent('button-counter',{//組件中的數(shù)據(jù)必須是一個函數(shù)，通過返回值來返回初始數(shù)據(jù)

data:function(){return{count:0}},//表示組件的模板

template:'<buttonv-on:click="count++">單擊了{{count}}次</button>'})組件基礎(chǔ)初識組件定義（2）將組件button-counter作為自定義元素來使用在HTML代碼中將組件button-counter作為自定義元素來使用，代碼如下。<divid="app"><button-counter></button-counter></div>（3）創(chuàng)建根實例通過newVue()創(chuàng)建Vue根實例，代碼如下。varvm=newVue({el:'#app'})（4）瀏覽網(wǎng)頁demo1201.html瀏覽網(wǎng)頁demo1201.html，初始狀態(tài)的按鈕為

，單擊1次后按鈕變?yōu)橐驗榻M件是可復(fù)用的Vue實例，所以它們與newVue()接收相同的選項，如data、computed、watch、methods以及生命周期鉤子等，僅有的例外是像el這樣根實例特有的選項。組件基礎(chǔ)初識組件定義1．復(fù)用組件組件的可復(fù)用性很強，可以將組件進行任意次數(shù)的復(fù)用，即一次定義，多次使用?！纠縿?chuàng)建網(wǎng)頁文件demo1202.html，該文件中自定義組件button-counter的代碼與網(wǎng)頁文件demo1201.html中的相同，在網(wǎng)頁demo1202.html中對自定義的組件button-counter進行復(fù)用。代碼如下。<divid="app"><button-counter></button-counter><button-counter></button-counter><button-counter></button-counter></div><script>//定義一個名為button-counter的組件Vponent('button-counter',{data:function(){return{count:0}},template:'<buttonv-on:click="count++">單擊了{{count}}次</button>'})組件基礎(chǔ)初識組件定義

//創(chuàng)建根實例

varvm=newVue({el:'#app'})</script>網(wǎng)頁demo1202.html的初始狀態(tài)如圖12-1所示。在網(wǎng)頁demo1202.html的初始狀態(tài)中，單擊左側(cè)的按鈕1次，單擊中間的按鈕2次，單擊右側(cè)的按鈕3次后，結(jié)果如圖12-2所示。這里共使用了3個button-counter組件，每個組件都會各自獨立維護自己的count值，因為每復(fù)用一次組件，就會有一個它的新實例被創(chuàng)建。單擊某一個按鈕時，它的count值會進行累加。不同的按鈕有不同的count值，它們各自統(tǒng)計自己被單擊的次數(shù)。組件基礎(chǔ)初識組件定義2．data必須是一個函數(shù)一般而言，在Vue實例或Vue組件對象中，通過data來傳遞數(shù)據(jù)。當(dāng)定義button-counter組件時，可以發(fā)現(xiàn)它的data并不是像以下代碼這樣直接提供了一個對象。data:{count:0}一個組件的data選項必須是一個函數(shù)，因此每個組件都會返回全新的data對象，每個button-counter都有自己的內(nèi)部狀態(tài)。data:function(){return{count:0}}如果Vue沒有這條規(guī)則，則單擊一個按鈕有可能會影響到其他所有實例。組件基礎(chǔ)初識組件定義【例】創(chuàng)建網(wǎng)頁demo1203.html，在該網(wǎng)頁中定義一個Vue應(yīng)用，其中包含一個自定義組件<app-component>，功能是顯示一個按鈕；當(dāng)該按鈕被單擊時count值遞增。在網(wǎng)頁demo1203.html中編寫的代碼如下。<divid="app"><app-component></app-component><app-component></app-component><app-component></app-component></div><script>Vponent('app-component',{template:'<buttonv-on:click="counter+=1">{{counter}}</button>',data:function(){return{counter:0};}})//創(chuàng)建根實例

newVue({el:'#app'})</script>組件基礎(chǔ)初識組件定義通常一個應(yīng)用會以一棵嵌套的組件樹（ComponentTree）的形式來組織，組件樹示意如圖12-3所示例如，可能會有頁眉、側(cè)邊欄、內(nèi)容區(qū)等組件，每個組件又包含其他的諸如導(dǎo)航超鏈接之類的組件。為了能在模板中使用，這些組件必須先注冊以便Vue能夠識別它們。這里有兩種組件的注冊類型：全局注冊和局部注冊。這里的組件是通過Vponent()進行全局注冊的，形式如下。Vponent('component-name',{//選項})全局注冊的組件可以用于其被注冊之后的任何新創(chuàng)建的Vue根實例中。盡管在Vue中渲染HTML代碼的速度很快，但是當(dāng)組件中包含大量靜態(tài)內(nèi)容時，可以考慮使用v-once指令將渲染結(jié)果緩存起來。例如：Vponent('app-component',{template:'<divv-once>內(nèi)容</div>'})組件基礎(chǔ)組件的組織并不是所有的元素都可以嵌套模板，因為會受到HTML元素嵌套規(guī)則的限制，如<ul></ul>、<ol></ol>、<table></table>、<select></select>限制了包圍的元素，而如<option>這樣的元素只能出現(xiàn)在某些其他元素內(nèi)部。在自定義組件中使用這些受限制的元素可能會導(dǎo)致出現(xiàn)一些問題，例如：<tableid="app"><app-row>…</app-row></table>此時，自定義組件app-row被認(rèn)為是無效的，因此在渲染的時候會導(dǎo)致出錯。解決這個問題的方案是使用is屬性。組件基礎(chǔ)嵌套限制【示例12-5】demo1205.html在網(wǎng)頁demo1205.html中編寫的代碼如下。<tableid="app"><tris="app-row"></tr></table><script>//注冊varheader={template:'<divclass="hd">表格列標(biāo)題</div>'};//創(chuàng)建實例newVue({el:'#app',components:{'app-row':header}})</script>組件基礎(chǔ)嵌套限制HTML代碼將被渲染為<tableid="app"><tbody><divis="hd">表格列標(biāo)題</div></tbody></table>Vue強制要求每一個Vue實例（組件本質(zhì)上就是Vue實例）都需要有一個根元素，否則運行時會報錯。例如，這里給出以下代碼。<divid="example"><app-component></app-component></div><script>//注冊Vponent('app-component',{template:`<p>第一段內(nèi)容</p><p>第二段內(nèi)容</p>`,})//創(chuàng)建根實例newVue({el:'#example'})</script>組件基礎(chǔ)根元素上述代碼需要改寫如下，以添加根元素<div></div>。<script>//注冊Vponent('app-component',{template:`<div><p>第一段內(nèi)容</p><p>第二段內(nèi)容</p></div>`,})//創(chuàng)建根實例newVue({el:'#example'})</script>有時候，可能想在某個組件的根元素上監(jiān)聽一個原生事件，這通過直接使用v-bind指令是不能實現(xiàn)的。例如：此時，使用.native修飾v-on指令即可實現(xiàn)在組件的根元素上監(jiān)聽一個原生事件。組件基礎(chǔ)原生事件當(dāng)注冊一個組件的時候，需要為其命名。分析以下代碼。Vponent('component-name',{/*...*/})組件名就是Vponent()的第一個參數(shù)component-name。組件的命名規(guī)范依賴于組件的作用，當(dāng)直接在DOM中使用一個組件的時候，推薦遵循W3C規(guī)范中的自定義組件名規(guī)范（字母全小寫且必須包含一個連字符），這會幫助用戶避免組件名和當(dāng)前以及未來的HTML元素名相沖突。1．基礎(chǔ)組件命名應(yīng)用特定樣式和約定的基礎(chǔ)組件（也就是展示類的、無邏輯的或無狀態(tài)的組件）時，應(yīng)該全部以一個特定的前綴開頭，如Base、App或V，而不使用My、Vue之類的前綴。這樣做有以下幾個好處。（1）當(dāng)用戶在編輯器中對組件以字母順序排序時，所應(yīng)用的基礎(chǔ)組件會全部列在一起，這樣更易于識別。（2）組件名應(yīng)盡量由多個單詞組合而成，這樣做可以避免在為簡單組件命名時隨意選擇前綴，如選擇MyButton、VueButton之類的前綴，從而使組件名更具備描述性。組件注冊與使用組件命名2．組件名的字母大小寫定義組件名的方式有以下兩種。（1）使用首字母大寫命名方式Vponent('ComponentName',{/*...*/})使用首字母大寫命名方式定義一個組件后，在引用這個組件時，這兩種命名方式都可以使用。也就是說，<component-name>和<ComponentName>都是可接受的。注意，盡管如此，直接在DOM（即非字符串的模板）中引用該組件時只有短橫線連接命名方式才是有效的。（2）使用短橫線連接命名方式Vponent('component-name',{/*...*/})當(dāng)使用短橫線連接命名方式定義一個組件時，必須在引用這個組件時使用短橫線連接命名方式，例如，<component-name>、<countter-nav>。代碼編輯器提供的自動補全功能能夠?qū)κ鬃帜复髮懙慕M件名進行自動補全，這使得用戶能夠在JavaScript代碼和模板中盡可能一致地使用引用組件的方式。然而，混用組件命名方式有的時候會導(dǎo)致字母大小寫不敏感的文件系統(tǒng)出現(xiàn)問題，因此，使用短橫線連接命名方式可以在一定程度上緩解這種問題。組件注冊與使用組件命名全局注冊的組件可以在多個Vue實例中使用，該全局組件可以用在任何新創(chuàng)建的Vue根實例的模板中。注冊一個全局組件的語法格式如下。Vponent(ComponentName,{Options//選項})調(diào)用Vponent()方法時需要傳入兩個參數(shù)，第一個參數(shù)為組件名稱，第二個參數(shù)為配置選項，也可以為構(gòu)造組件時定義的變量名。要確保在初始化根實例之前注冊了組件。組件注冊與使用全局注冊【示例12-7】demo1207.html代碼如下。<divid="app"><app-component></app-component></div><script>//注冊Vponent('app-component',{template:'<div>全局注冊組件</div>'})//創(chuàng)建根實例varvm=newVue({el:'#app'})</script>前面所介紹的全局注冊形式是一種直接注冊的方法，即注冊語法糖。也可以先使用extend()方法定義一個變量。組件注冊與使用全局注冊【示例12-8】demo1208.html代碼如下。varappCom=Vue.extend({template:'<div>這是組件</div>'});使用全局注冊方法創(chuàng)建app-component組件。Vponent('app-component',appCom)其中，app-component為自定義組件的名稱，appCom對應(yīng)的就是前面構(gòu)建的組件變量。如果使用<template>及<script>標(biāo)簽構(gòu)建組件，則第二個參數(shù)為其id值，例如：Vponent('app-component',{template:'#appCom'})組件注冊與使用全局注冊全局注冊有時候是不夠理想的。例如，如果使用一個類似webpack的構(gòu)建系統(tǒng)，則全局注冊所有的組件意味著即便已經(jīng)不再使用某個組件了，它仍然會被包含在最終的構(gòu)建結(jié)果中。在這種情況下，可以通過一個普通的JavaScript對象來定義組件。varComponentA={/*...*/}varComponentB={/*...*/}在components選項中定義想要使用的組件。varvm=newVue({el:'#app',components:{'component-a':ComponentA,'component-b':ComponentB}})對于components對象中的每個屬性來說，其屬性名是組件的名稱，其屬性值是組件的選項對象。局部注冊的組件只能在注冊該組件的實例中使用，在其子組件中不可用。組件注冊與使用局部注冊1．普通局部注冊【示例12-9】demo1209.html代碼如下。<divid="app"><app-component></app-component></div><script>varappCom={template:'<div>局部注冊組件</div>'};//創(chuàng)建根實例

varvm=newVue({el:'#app',components:{//app-component將只在父模板中可用

'app-component':appCom}})</script>組件注冊與使用局部注冊2．注冊語法糖【示例12-10】demo1210.html代碼如下。<divid="app"><app-component></app-component></div><script>//創(chuàng)建根實例

varvm=newVue({el:'#app',components:{//app-component將只在父模板中可用

'app-component':{template:'<div>這是局部注冊組件</div>'}}})</script>組件注冊與使用局部注冊組件成功注冊后，可以通過以下方式來使用組件。<div>/*使用組件*/<ComponentName></ComponentName></div>組件注冊與使用使用組件調(diào)用extend()方法全局注冊一個名為app-component的組件，其基本過程如下?！臼纠?2-11】使用extend()方法構(gòu)建組件的過程如下。（1）定義變量appComvarappCom=Vue.extend({template:'<div>這是組件</div>'})其中，template表示定義模板的標(biāo)簽，模板的內(nèi)容需寫在該標(biāo)簽下。（2）構(gòu)建組件app-component//構(gòu)建名為app-component的組件Vponent('app-component',appCom);（3）定義Vue實例varapp=newVue({el:'#app'})（4）使用組件<divid="app"><app-component></app-component></div>組件構(gòu)建使用extend()方法構(gòu)建組件模板代碼通常寫在HTML結(jié)構(gòu)中，這樣可以改善程序員的開發(fā)體驗，提高開發(fā)效率。Vue提供的<template>標(biāo)簽用于定義結(jié)構(gòu)的模板，可以在該標(biāo)簽中編寫HTML代碼，并通過id值將其綁定到<template>屬性上。使用<template>標(biāo)簽構(gòu)建組件時，需在<template>標(biāo)簽上添加id屬性，用于以后的組件構(gòu)建。【示例12-12】<divid="app"><app-component></app-component></div><templateid="content"><div>歡迎登錄</div></template><script>//創(chuàng)建根實例

varvm=newVue({el:'#app',components:{'app-component':{template:'#content'}}})</script>組件構(gòu)建使用<template>標(biāo)簽構(gòu)建組件使用<script>標(biāo)簽構(gòu)建組件時，同樣需添加id屬性，同時要添加type="text/x-template"，這是為了告訴瀏覽器不執(zhí)行<script>標(biāo)簽中的代碼。對于自定義組件app-component，可以使用以下代碼對其進行引用。<divid="app"><app-component></app-component></div>【示例12-13】局部注冊組件app-component的示例代碼如下。<scripttype="text/x-template"id="content"><p>歡迎登錄</p></script><script>varvm=newVue({el:'#app',components:{'app-component':{template:'#content'}}})</script>組件構(gòu)建使用<script>標(biāo)簽構(gòu)建組件全局注冊組件app-component的示例代碼如下。<scripttype="text/x-template"id="content"><p>歡迎登錄</p></script>Vponent('app-component',{template:'#content'})上述代碼等價于以下代碼。Vponent('app-component',{template:'<p>歡迎登錄</p>'})組件構(gòu)建使用<script>標(biāo)簽構(gòu)建組件【示例12-14】創(chuàng)建網(wǎng)頁demo1214.html，在該網(wǎng)頁中編寫代碼，使用components選項注冊組件，實現(xiàn)組件樹的效果。掃描二維碼查看【電子活頁12-3】中網(wǎng)頁demo1214.html的代碼或者從本模塊配套的教學(xué)資源中打開對應(yīng)的文檔查看相應(yīng)內(nèi)容。HTML代碼將被渲染為<divid="app"><divclass="main"><p>標(biāo)題</p><p>正文內(nèi)容</p></div></div>對于大型應(yīng)用來說，有必要將整個應(yīng)用程序劃分為多個組件，以便于管理。一般的組件應(yīng)用模板如下。<divid="app"><app-nav></app-nav><app-view><app-sidenum></app-sidenum><app-content></app-content></app-view></div>組件構(gòu)建使用<script>標(biāo)簽構(gòu)建組件1．使用全局注冊方式構(gòu)建父子組件【示例12-15】使用全局注冊方式構(gòu)建父子組件的過程如下。（1）構(gòu)建子組件//構(gòu)建子組件childvarchildNode=Vue.extend({template:'<div>這是子組件</div>'})//注冊名為child的組件Vponent('child',childNode)（2）構(gòu)建父組件//構(gòu)建父組件parent，在其中嵌套child組件varparentNode=Vue.extend({template:'<div>這是父組件<child></child></div>'})Vponent('parent',parentNode);組件構(gòu)建構(gòu)建父子組件（3）定義Vue實例varvm=newVue({el:'#app'})（4）使用父組件<divid="app"><parent></parent></div>2．使用局部注冊方式構(gòu)建父子組件【編程訓(xùn)練】【示例12-16】demo1216.html使用局部注冊方式構(gòu)建父子組件的過程如下。（1）構(gòu)建子組件varchildNode=Vue.extend({template:'<div>這是子組件</div>'})（2）構(gòu)建父組件在父組件中局部注冊子組件。varparentNode=Vue.extend({template:'<div>這是父組件<child></child></div>',components:{'child':childNode}})組件構(gòu)建構(gòu)建父子組件（3）定義Vue實例在Vue實例中局部注冊父組件。varvm=newVue({el:'#app',components:{'parent':parentNode}})（4）使用父組件<divid="app"><parent></parent></div>組件接收的選項大部分與Vue實例接收的選項一樣，而組件選項props是非常重要的選項。在Vue中，父子組件的關(guān)系可以總結(jié)為PropsDown和EventsUp。父組件通過Props向下傳遞數(shù)據(jù)給子組件，子組件通過Events給父組件發(fā)送信息。父子組件之間的數(shù)據(jù)傳遞如圖12-4所示Vue.js組件選項props在一個優(yōu)秀的接口中盡可能將父子組件解耦是很重要的，這保證了每個組件可以在相對隔離的環(huán)境中運行，也大幅提高了組件的可維護性和可重用性。先介紹兩種父子組件的錯誤寫法。下面這種寫法是錯誤的，因為當(dāng)子組件注冊到父組件時，Vue會編譯好父組件的模板，模板的內(nèi)容已經(jīng)決定了父組件將要渲染的HTML內(nèi)容。<divid="example"><parent><child></child><child></child></parent></div><parent>…</parent>運行時，它的一些子標(biāo)簽只會被當(dāng)作普通的HTML代碼來運行，<child></child>不是標(biāo)準(zhǔn)的HTML標(biāo)簽，會被瀏覽器直接忽略。在父組件之外使用子組件也是錯誤的。<divid="example"><parent></parent><child></child></div>Vue.js組件選項props父子組件【示例12-17】demo1217.html掃描二維碼查看【電子活頁12-4】中網(wǎng)頁demo1217.html的代碼或者從本模塊配套的教學(xué)資源中打開對應(yīng)的文檔查看相應(yīng)內(nèi)容。HTML代碼將被渲染為<divid="app"><div><div>這是子組件</div></div></div>Vue.js組件選項props父子組件組件實例的作用域是孤立的，這意味著不能（也不應(yīng)該）在子組件的模板內(nèi)直接引用父組件的數(shù)據(jù)。要讓子組件使用父組件的數(shù)據(jù)，需要通過子組件的props選項實現(xiàn)。使用props傳遞數(shù)據(jù)包括靜態(tài)和動態(tài)兩種形式，本節(jié)先介紹靜態(tài)props。子組件要顯式地使用props選項聲明它期待獲得的數(shù)據(jù)。例如：varchildNode={template:'<div>{{para}}</div>',props:['para’]}靜態(tài)props通過為子組件在父組件中的占位符添加特性的方式來達到傳值的目的?！臼纠?2-18】demo1218.html掃描二維碼查看【電子活頁12-5】中網(wǎng)頁demo1218.html的代碼或者從本模塊配套的教學(xué)資源中打開對應(yīng)的文檔查看相應(yīng)內(nèi)容。HTML代碼將被渲染為<divid="app"><div><div>abc</div><div>123</div></div></div>Vue.js組件選項props靜態(tài)propsHTML中的屬性名是字母大小寫不敏感的，所以瀏覽器會把所有大寫字符解釋為小寫字符。這意味著當(dāng)使用DOM中的模板時，駝峰格式的props屬性名需要使用其等價的短橫線連接格式替代。Vponent('blog-post',{//在JavaScript中是駝峰格式

props:['postTitle'],template:'<p>{{postTitle}}</p>'})<!--在HTML中是短橫線連接格式--><blog-postpost-title="hello"></blog-post>Vue.js組件選項propsprops屬性聲明和模板中的組件命名約定如果使用字符串模板，那么這個限制就不存在了。對于props聲明的屬性來說，在父級HTML模板中，屬性名需要使用短橫線連接格式。例如：varparentNode={template:`<div><childapp-para="abc"></child><childapp-para="123"></child></div>`,components:{'child':childNode}};Vue.js組件選項propsprops屬性聲明和模板中的組件命名約定聲明子級props屬性時，使用小駝峰格式或者短橫線連接格式都可以；而當(dāng)子級模板使用從父級模板傳來的變量時，需要使用對應(yīng)的小駝峰格式。例如：varchildNode={template:'<div>{{appPara}}</div>',props:['appPara']}varchildNode={template:'<div>{{appPara}}</div>',props:['app-para']}Vue.js組件選項propsprops屬性聲明和模板中的組件命名約定在模板中，當(dāng)要動態(tài)地綁定父組件的數(shù)據(jù)到子級模板的props中時，與綁定任何普通的HTML特性類似，可使用v-bind指令實現(xiàn)。每當(dāng)父組件的數(shù)據(jù)變化時，該變化會傳遞給子組件?！臼纠?2-19】demo1219.html掃描二維碼查看【電子活頁12-6】中網(wǎng)頁demo1219.html的代碼或者從本模塊配套的教學(xué)資源中打開對應(yīng)的文檔查看相應(yīng)內(nèi)容。HTML代碼將被渲染為<divid="app"><div><div>abc</div><div>123</div></div></div>

Vue.js組件選項props動態(tài)props在Vue中，組件之間的通信有父子組件之間的通信、兄弟組件之間的通信、先輩組件與后代組件之間的通信等。父組件通過props選項把數(shù)據(jù)傳遞給子組件，子組件的props選項能夠接收來自父組件的數(shù)據(jù)。借助props選項可以實現(xiàn)從上到下的單向數(shù)據(jù)流傳遞，父組件的props更新會向下流動到子組件中，但是子組件的props更新不會向上流動到父組件中。父子組件之間的數(shù)據(jù)傳遞相當(dāng)于河中的流水，只能從上游流往下游，不能逆流，這正是Vue的設(shè)計理念之一——單向數(shù)據(jù)流。而props可以理解為管道與管道之間的銜接口，這樣水才能向下流。$emit能夠?qū)崿F(xiàn)子組件向父組件傳遞數(shù)據(jù)，子組件使用$emit觸發(fā)父組件中定義的事件，子組件的數(shù)據(jù)信息通過參數(shù)傳遞，在父組件中使用v-on或@自定義事件對子組件通過$emit觸發(fā)的事件進行監(jiān)聽即可。組件之間的通信【示例12-20】demo1220.html創(chuàng)建網(wǎng)頁demo1220.html，在該網(wǎng)頁中編寫代碼，創(chuàng)建父子組件，子組件的props選項接收來自父組件的數(shù)據(jù)，實現(xiàn)父組件向子組件的數(shù)據(jù)傳遞。掃描二維碼查看【電子活頁12-7】中網(wǎng)頁demo1220.html的代碼或者從本模塊配套的教學(xué)資源中打開對應(yīng)的文檔查看相應(yīng)內(nèi)容。頁面中渲染出的HTML代碼如下。<divid="app"><div>這是父組件傳來的數(shù)據(jù)</div></div>子組件的props選項接收來自父組件的字符串?dāng)?shù)據(jù)“這是父組件傳來的數(shù)據(jù)”，變量content的默認(rèn)值“這是子組件的數(shù)據(jù)”被父組件傳來的字符串覆蓋。

組件之間的通信父組件向子組件傳遞數(shù)據(jù)是主要的數(shù)據(jù)傳遞形式，該功能可以通過組件的屬性和插槽實現(xiàn)。父組件傳遞數(shù)據(jù)到子組件時使用了props選項，并且這種傳遞是單向的，只能由父組件傳到子組件。這里為示例12-20中的父組件增加一個數(shù)據(jù)，并將其傳遞到子組件中渲染顯示，如果父組件需要傳遞多個數(shù)據(jù)給子組件，則依次增加相應(yīng)數(shù)據(jù)即可。組件之間的通信父組件向子組件傳遞數(shù)據(jù)【示例12-21】實現(xiàn)過程與代碼如下。（1）在父組件中增加msg，并將其綁定到子組件上。代碼如下。varparentNode=Vue.extend({template:'<div>這是父組件<child:pdata=msg></child></div>',data(){return{msg:'這是父組件傳給子組件的數(shù)據(jù)：123'}},components:{'child':childNode}});<child:pdata=msg></child>中的:pdata是v-bind:pdata的簡寫形式，pdata是自定義的要傳遞數(shù)據(jù)的名稱，子組件也用該名稱獲取數(shù)據(jù)，msg是父組件中數(shù)據(jù)的名稱。組件之間的通信父組件向子組件傳遞數(shù)據(jù)（2）在子組件中通過props獲取數(shù)據(jù)，并將其渲染出來。代碼如下。varchildNode=Vue.extend({template:'<div><p>這是子組件</p>{{pdata}}</div>',props:['pdata']});由于父組件傳遞數(shù)據(jù)到子組件是單向的，因此父組件中的數(shù)據(jù)發(fā)生變化時，子組件中的數(shù)據(jù)會自動更新，但子組件不可以直接修改通過props獲取到的父組件中的數(shù)據(jù)。（3）創(chuàng)建根實例。代碼如下。varvm=newVue({el:'#app',components:{'parent':parentNode}})組件之間的通信父組件向子組件傳遞數(shù)據(jù)在Vue中，如果子組件需要向父組件傳遞數(shù)據(jù)，則需要使用事件機制來實現(xiàn)，即從上向下通過屬性傳遞數(shù)據(jù)，從下向上通過事件傳遞數(shù)據(jù)。子組件向父組件傳遞數(shù)據(jù)時，需要通過$emit()方法向父組件暴露一個事件，父組件使用v-on或@自定義事件進行監(jiān)聽。父組件在處理這個事件的方法中獲取子組件傳來的數(shù)據(jù)。在子組件中，可以通過以下方式監(jiān)聽事件。v-on:click="$emit('funcName',a)"如果需要傳遞多個參數(shù)，則可以使用以下方式。v-on:click="$emit('funcName',{a,b…})"父組件中通過自定義事件來監(jiān)聽子組件的事件，例如，對于自定義事件childlistener，可以通過以下方式在父組件中進行監(jiān)聽。v-on:childlistener="parentMethod($event)"$event就是子組件傳過來的參數(shù)，如果子組件傳過來的是一個參數(shù)，則$event等于該參數(shù)；如果子組件傳過來的是一個對象，則$event為該對象，可以通過對象的方式獲取對應(yīng)的參數(shù)，如$event.a、$event.b等。組件之間的通信子組件向父組件傳遞數(shù)據(jù)【示例12-22】demo1222.html實現(xiàn)過程與代碼如下。（1）構(gòu)建子組件代碼如下。varchildNode=Vue.extend({template:'<div><button@click="change">單擊給父組件傳值</button></div>',methods:{change:function(){this.$emit('posttoparent',10)}}});子組件按鈕綁定了一個click事件，單擊按鈕后執(zhí)行change方法，該方法通過$emit()觸發(fā)事件，事件名為posttoparent，并且?guī)Я艘粋€參數(shù)10。組件之間的通信子組件向父組件傳遞數(shù)據(jù)（2）構(gòu)建父組件代碼如下。varparentNode=Vue.extend({template:'<div><childv-on:posttoparent="getfromchild"></child>

子組件傳遞給父組件的值為：{{datafromchild}}</div>',data(){return{datafromchild:''}},components:{'child':childNode},methods:{getfromchild:function(val){this.datafromchild=val}}});組件之間的通信子組件向父組件傳遞數(shù)據(jù)父組件通過v-on指令接收事件，格式如下。v-on:事件名="父組件方法"父組件將接收到的參數(shù)賦值給datafromchild。（3）創(chuàng)建根實例代碼如下。varvm=newVue({el:'#app',components:{'parent':parentNode}})組件之間的通信子組件向父組件傳遞數(shù)據(jù)兄弟組件之間通信是使用$emit()方法實現(xiàn)的，但原生Vue需要新建一個空的Vue實例來當(dāng)作兄弟組件的“橋梁”【示例12-23】demo1223.html掃描二維碼查看【電子活頁12-8】中網(wǎng)頁demo1223.html的代碼或者從本模塊配套的教學(xué)資源中打開對應(yīng)的文檔查看相應(yīng)內(nèi)容。組件之間的通信兄弟組件之間通信1．什么是插槽插槽（Slot）是Vue為組件的封裝者提供的工具。允許開發(fā)人員在封裝組件時，把不確定的、希望由用戶指定的部分定義為插槽，如圖12-5所示?？梢园巡宀郛?dāng)作組件封裝期間為用戶預(yù)留的內(nèi)容的占位符。Vue.js插槽應(yīng)用插槽概述2．插槽的基本用法插槽是子組件中提供給父組件使用的一個占位符，封裝組件時，可以通過<slot>元素定義插槽，從而為用戶預(yù)留內(nèi)容占位符。父組件可以在這個占位符中填充任何模板代碼，填充的內(nèi)容會替換子組件的<slot></slot>標(biāo)簽。3．默認(rèn)丟棄父組件的內(nèi)容一般的，如果子組件模板沒有預(yù)留插槽，則父組件的內(nèi)容將會被丟棄?！臼纠?2-24】掃描二維碼查看【電子活頁12-9】中網(wǎng)頁demo1224.html的代碼或者從本模塊配套的教學(xué)資源中打開對應(yīng)的文檔查看相應(yīng)內(nèi)容。HTML代碼的渲染結(jié)果如下，<child>所包含的<p>測試內(nèi)容</p>被丟棄。<divid="app"><divclass="parent"><p>父組件</p><divclass="