組件基礎(chǔ)
組件（Component）是對數(shù)據(jù)和方法的簡單封裝。
目錄
基本示例
這里有一個 Vue 組件的示例：
// 定義一個名為 button-counter 的新組件
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})組件是可復(fù)用的 Vue 實(shí)例，且?guī)в幸粋€名字：在這個例子中是 <button-counter>。我們可以在一個通過 new Vue 創(chuàng)建的 Vue 根實(shí)例中，把這個組件作為自定義元素來使用：
<div id="components-demo"> <button-counter></button-counter> </div>
new Vue({ el: '#components-demo' })
因?yàn)榻M件是可復(fù)用的 Vue 實(shí)例，所以它們與 new Vue 接收相同的選項(xiàng)，例如 data、computed、watch、methods 以及生命周期鉤子等。僅有的例外是像 el 這樣根實(shí)例特有的選項(xiàng)。
組件的復(fù)用
你可以將組件進(jìn)行任意次數(shù)的復(fù)用：
<div id="components-demo"> <button-counter></button-counter> <button-counter></button-counter> <button-counter></button-counter> </div>
注意當(dāng)點(diǎn)擊按鈕時，每個組件都會各自獨(dú)立維護(hù)它的 count。因?yàn)槟忝坑靡淮谓M件，就會有一個它的新實(shí)例被創(chuàng)建。
data 必須是一個函數(shù)
當(dāng)我們定義這個 <button-counter> 組件時，你可能會發(fā)現(xiàn)它的 data 并不是像這樣直接提供一個對象：
data: {
count: 0
}取而代之的是，一個組件的 data 選項(xiàng)必須是一個函數(shù)，因此每個實(shí)例可以維護(hù)一份被返回對象的獨(dú)立的拷貝：
data: function () {
return {
count: 0
}
}如果 Vue 沒有這條規(guī)則，點(diǎn)擊一個按鈕就可能會像如下代碼一樣影響到其它所有實(shí)例：
組件的組織
通常一個應(yīng)用會以一棵嵌套的組件樹的形式來組織：
例如，你可能會有頁頭、側(cè)邊欄、內(nèi)容區(qū)等組件，每個組件又包含了其它的像導(dǎo)航鏈接、博文之類的組件。
為了能在模板中使用，這些組件必須先注冊以便 Vue 能夠識別。這里有兩種組件的注冊類型：全局注冊和局部注冊。至此，我們的組件都只是通過 Vue.component 全局注冊的：
Vue.component('my-component-name', {
// ... options ...
})全局注冊的組件可以用在其被注冊之后的任何 (通過 new Vue) 新創(chuàng)建的 Vue 根實(shí)例，也包括其組件樹中的所有子組件的模板中。
到目前為止，關(guān)于組件注冊你需要了解的就這些了，如果你閱讀完本頁內(nèi)容并掌握了它的內(nèi)容，我們會推薦你再回來把組件注冊讀完。
通過 Prop 向子組件傳遞數(shù)據(jù)
早些時候，我們提到了創(chuàng)建一個博文組件的事情。問題是如果你不能向這個組件傳遞某一篇博文的標(biāo)題或內(nèi)容之類的我們想展示的數(shù)據(jù)的話，它是沒有辦法使用的。這也正是 prop 的由來。
Prop 是你可以在組件上注冊的一些自定義特性。當(dāng)一個值傳遞給一個 prop 特性的時候，它就變成了那個組件實(shí)例的一個屬性。為了給博文組件傳遞一個標(biāo)題，我們可以用一個 props 選項(xiàng)將其包含在該組件可接受的 prop 列表中：
Vue.component('blog-post', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
})一個組件默認(rèn)可以擁有任意數(shù)量的 prop，任何值都可以傳遞給任何 prop。在上述模板中，你會發(fā)現(xiàn)我們能夠在組件實(shí)例中訪問這個值，就像訪問 data 中的值一樣。
一個 prop 被注冊之后，你就可以像這樣把數(shù)據(jù)作為一個自定義特性傳遞進(jìn)來：
<blog-post title="My journey with Vue"></blog-post> <blog-post title="Blogging with Vue"></blog-post> <blog-post title="Why Vue is so fun"></blog-post>
然而在一個典型的應(yīng)用中，你可能在 data 里有一個博文的數(shù)組：
new Vue({
el: '#blog-post-demo',
data: {
posts: [
{ id: 1, title: 'My journey with Vue' },
{ id: 2, title: 'Blogging with Vue' },
{ id: 3, title: 'Why Vue is so fun' }
]
}
})并想要為每篇博文渲染一個組件：
<blog-post v-for="post in posts" v-bind:key="post.id" v-bind:title="post.title" ></blog-post>
如上所示，你會發(fā)現(xiàn)我們可以使用 v-bind 來動態(tài)傳遞 prop。這在你一開始不清楚要渲染的具體內(nèi)容，比如從一個 API 獲取博文列表的時候，是非常有用的。
到目前為止，關(guān)于 prop 你需要了解的大概就這些了，如果你閱讀完本頁內(nèi)容并掌握了它的內(nèi)容，我們會推薦你再回來把 prop 讀完。
單個根元素
當(dāng)構(gòu)建一個 <blog-post> 組件時，你的模板最終會包含的東西遠(yuǎn)不止一個標(biāo)題：
<h3>{{ title }}</h3>最最起碼，你會包含這篇博文的正文：
<h3>{{ title }}</h3>
<div v-html="content"></div>然而如果你在模板中嘗試這樣寫，Vue 會顯示一個錯誤，并解釋道 every component must have a single root element (每個組件必須只有一個根元素)。你可以將模板的內(nèi)容包裹在一個父元素內(nèi)，來修復(fù)這個問題，例如：
<div class="blog-post">
<h3>{{ title }}</h3>
<div v-html="content"></div>
</div>看起來當(dāng)組件變得越來越復(fù)雜的時候，我們的博文不只需要標(biāo)題和內(nèi)容，還需要發(fā)布日期、評論等等。為每個相關(guān)的信息定義一個 prop 會變得很麻煩：
<blog-post v-for="post in posts" v-bind:key="post.id" v-bind:title="post.title" v-bind:content="post.content" v-bind:publishedAt="post.publishedAt" v-bind:comments="post.comments" ></blog-post>
所以是時候重構(gòu)一下這個 <blog-post> 組件了，讓它變成接受一個單獨(dú)的 post prop：
<blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post" ></blog-post>
Vue.component('blog-post', {
props: ['post'],
template: `
<div class="blog-post">
<h3>{{ post.title }}</h3>
<div v-html="post.content"></div>
</div>
`
})上述的這個和一些接下來的示例使用了 JavaScript 的模板字符串來讓多行的模板更易讀。它們在 IE 下并沒有被支持，所以如果你需要在不 (經(jīng)過 Babel 或 TypeScript 之類的工具) 編譯的情況下支持 IE，請使用折行轉(zhuǎn)義字符取而代之。
現(xiàn)在，不論何時為 post 對象添加一個新的屬性，它都會自動地在 <blog-post> 內(nèi)可用。
監(jiān)聽子組件事件
在我們開發(fā) <blog-post> 組件時，它的一些功能可能要求我們和父級組件進(jìn)行溝通。例如我們可能會引入一個輔助功能來放大博文的字號，同時讓頁面的其它部分保持默認(rèn)的字號。
在其父組件中，我們可以通過添加一個 postFontSize 數(shù)據(jù)屬性來支持這個功能：
new Vue({
el: '#blog-posts-events-demo',
data: {
posts: [/* ... */],
postFontSize: 1
}
})它可以在模板中用來控制所有博文的字號：
<div id="blog-posts-events-demo">
<div :style="{ fontSize: postFontSize + 'em' }">
<blog-post
v-for="post in posts"
v-bind:key="post.id"
v-bind:post="post"
></blog-post>
</div>
</div>現(xiàn)在我們在每篇博文正文之前添加一個按鈕來放大字號：
Vue.component('blog-post', {
props: ['post'],
template: `
<div class="blog-post">
<h3>{{ post.title }}</h3>
<button>
Enlarge text
</button>
<div v-html="post.content"></div>
</div>
`
})問題是這個按鈕不會做任何事：
<button> Enlarge text </button>
當(dāng)點(diǎn)擊這個按鈕時，我們需要告訴父級組件放大所有博文的文本。幸好 Vue 實(shí)例提供了一個自定義事件的系統(tǒng)來解決這個問題。父級組件可以像處理 native DOM 事件一樣通過 v-on 監(jiān)聽子組件實(shí)例的任意事件：
<blog-post ... v-on:enlarge-text="postFontSize += 0.1" ></blog-post>
同時子組件可以通過調(diào)用內(nèi)建的 $emit 方法 并傳入事件名稱來觸發(fā)一個事件：
<button v-on:click="$emit('enlarge-text')">
Enlarge text
</button>有了這個 v-on:enlarge-text="postFontSize += 0.1" 監(jiān)聽器，父級組件就會接收該事件并更新 postFontSize 的值。
使用事件拋出一個值
有的時候用一個事件來拋出一個特定的值是非常有用的。例如我們可能想讓 <blog-post> 組件決定它的文本要放大多少。這時可以使用 $emit 的第二個參數(shù)來提供這個值：
<button v-on:click="$emit('enlarge-text', 0.1)">
Enlarge text
</button>然后當(dāng)在父級組件監(jiān)聽這個事件的時候，我們可以通過 $event 訪問到被拋出的這個值：
<blog-post ... v-on:enlarge-text="postFontSize += $event" ></blog-post>
或者，如果這個事件處理函數(shù)是一個方法：
<blog-post ... v-on:enlarge-text="onEnlargeText" ></blog-post>
那么這個值將會作為第一個參數(shù)傳入這個方法：
methods: {
onEnlargeText: function (enlargeAmount) {
this.postFontSize += enlargeAmount
}
}在組件上使用 v-model
自定義事件也可以用于創(chuàng)建支持 v-model 的自定義輸入組件。記?。?/p>
<input v-model="searchText">
等價于：
<input v-bind:value="searchText" v-on:input="searchText = $event.target.value" >
當(dāng)用在組件上時，v-model 則會這樣：
<custom-input v-bind:value="searchText" v-on:input="searchText = $event" ></custom-input>
為了讓它正常工作，這個組件內(nèi)的 <input> 必須：
將其
value特性綁定到一個名叫value的 prop 上在其
input事件被觸發(fā)時，將新的值通過自定義的input事件拋出
寫成代碼之后是這樣的：
Vue.component('custom-input', {
props: ['value'],
template: `
<input
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
>
`
})現(xiàn)在 v-model 就應(yīng)該可以在這個組件上完美地工作起來了：
<custom-input v-model="searchText"></custom-input>
到目前為止，關(guān)于組件自定義事件你需要了解的大概就這些了，如果你閱讀完本頁內(nèi)容并掌握了它的內(nèi)容，我們會推薦你再回來把自定義事件讀完。
通過插槽分發(fā)內(nèi)容
和 HTML 元素一樣，我們經(jīng)常需要向一個組件傳遞內(nèi)容，像這樣：
<alert-box> Something bad happened. </alert-box>
可能會渲染出這樣的東西：
幸好，Vue 自定義的 <slot> 元素讓這變得非常簡單：
Vue.component('alert-box', {
template: `
<div class="demo-alert-box">
<strong>Error!</strong>
<slot></slot>
</div>
`
})如你所見，我們只要在需要的地方加入插槽就行了——就這么簡單！
到目前為止，關(guān)于插槽你需要了解的大概就這些了，如果你閱讀完本頁內(nèi)容并掌握了它的內(nèi)容，我們會推薦你再回來把插槽讀完。
動態(tài)組件
有的時候，在不同組件之間進(jìn)行動態(tài)切換是非常有用的，比如在一個多標(biāo)簽的界面里：
上述內(nèi)容可以通過 Vue 的 <component> 元素加一個特殊的 is 特性來實(shí)現(xiàn)：
<!-- 組件會在 `currentTabComponent` 改變時改變 --> <component v-bind:is="currentTabComponent"></component>
在上述示例中，currentTabComponent 可以包括
已注冊組件的名字，或
一個組件的選項(xiàng)對象
你可以在這里查閱并體驗(yàn)完整的代碼，或在這個版本了解綁定組件選項(xiàng)對象，而不是已注冊組件名的示例。
到目前為止，關(guān)于動態(tài)組件你需要了解的大概就這些了，如果你閱讀完本頁內(nèi)容并掌握了它的內(nèi)容，我們會推薦你再回來把動態(tài)和異步組件讀完。
解析 DOM 模板時的注意事項(xiàng)
有些 HTML 元素，諸如 <ul>、<ol>、<table> 和 <select>，對于哪些元素可以出現(xiàn)在其內(nèi)部是有嚴(yán)格限制的。而有些元素，諸如 <li>、<tr> 和 <option>，只能出現(xiàn)在其它某些特定的元素內(nèi)部。
這會導(dǎo)致我們使用這些有約束條件的元素時遇到一些問題。例如：
<table> <blog-post-row></blog-post-row> </table>
這個自定義組件 <blog-post-row> 會被作為無效的內(nèi)容提升到外部，并導(dǎo)致最終渲染結(jié)果出錯。幸好這個特殊的 is 特性給了我們一個變通的辦法：
<table> <tr is="blog-post-row"></tr> </table>
需要注意的是如果我們從以下來源使用模板的話，這條限制是不存在的：
字符串 (例如：
template: '...')
到這里，你需要了解的解析 DOM 模板時的注意事項(xiàng)——實(shí)際上也是 Vue 的全部必要內(nèi)容，大概就是這些了。恭喜你！接下來還有很多東西要去學(xué)習(xí)，不過首先，我們推薦你先休息一下，試用一下 Vue，自己隨意做些好玩的東西。
如果你感覺已經(jīng)掌握了這些知識，我們推薦你再回來把完整的組件指南，包括側(cè)邊欄中組件深入章節(jié)的所有頁面讀完。