資訊專欄INFORMATION COLUMN
摘要：組件的復(fù)用你可以將組件進行任意次數(shù)的復(fù)用注意當(dāng)點擊按鈕時，每個組件都會各自獨立維護它的。
1、基本示例
// 定義一個名為 button-counter 的新組件
Vue.component("button-counter", {
data: function () {
return {
count: 0
}
},
template: ""
})
組件是可復(fù)用的 Vue 實例，且?guī)в幸粋€名字：在這個例子中是
new Vue({ el: "#components-demo" })
因為組件是可復(fù)用的 Vue 實例，所以它們與 new Vue 接收相同的選項，例如 data、computed、watch、methods 以及生命周期鉤子等。僅有的例外是像 el 這樣根實例特有的選項。
2、組件的復(fù)用你可以將組件進行任意次數(shù)的復(fù)用：
注意當(dāng)點擊按鈕時，每個組件都會各自獨立維護它的 count。因為你每用一次組件，就會有一個它的新實例被創(chuàng)建。
2.1 data必須是一個函數(shù)當(dāng)我們定義這個
data: {
count: 0
}
取而代之的是，一個組件的 data 選項必須是一個函數(shù)，因此每個實例可以維護一份被返回對象的獨立的拷貝：
data: function () {
return {
count: 0
}
}
如果 Vue 沒有這條規(guī)則，點擊一個按鈕就可能會影響到其它所有實例。
3、組件的組織通常一個應(yīng)用會以一棵嵌套的組件樹的形式來組織：
為了能在模板中使用，這些組件必須先注冊以便 Vue 能夠識別。這里有兩種組件的注冊類型：全局注冊和局部注冊。至此，我們的組件都只是通過 Vue.component 全局注冊的：
Vue.component("my-component-name", {
// ... options ...
})
全局注冊的組件可以用在其被注冊之后的任何 (通過 new Vue) 新創(chuàng)建的 Vue 根實例，也包括其組件樹中的所有子組件的模板中。
4、通過Prop向子組件傳遞數(shù)據(jù)Prop 是你可以在組件上注冊的一些自定義特性。當(dāng)一個值傳遞給一個 prop 特性的時候，它就變成了那個組件實例的一個屬性。為了給博文組件傳遞一個標題，我們可以用一個 props 選項將其包含在該組件可接受的 prop 列表中：
Vue.component("blog-post", {
props: ["title"],
template: "{{ title }}
"
})
一個組件默認可以擁有任意數(shù)量的 prop，任何值都可以傳遞給任何 prop。在上述模板中，你會發(fā)現(xiàn)我們能夠在組件實例中訪問這個值，就像訪問 data 中的值一樣。
一個 prop 被注冊之后，你就可以像這樣把數(shù)據(jù)作為一個自定義特性傳遞進來：
然而在一個典型的應(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" }
]
}
})
并想要為每篇博文渲染一個組件：
如上所示，你會發(fā)現(xiàn)我們可以使用 v-bind 來動態(tài)傳遞 prop。這在你一開始不清楚要渲染的具體內(nèi)容的時候，是非常有用的。
5、單個根元素當(dāng)構(gòu)建一個
{{ title }}
最最起碼，你會包含這篇博文的正文：
{{ title }}
然而如果你在模板中嘗試這樣寫，Vue 會顯示一個錯誤，并解釋道 every component must have a single root element (每個組件必須只有一個根元素)。你可以將模板的內(nèi)容包裹在一個父元素內(nèi)，來修復(fù)這個問題，例如：
{{ title }}
看起來當(dāng)組件變得越來越復(fù)雜的時候，我們的博文不只需要標題和內(nèi)容，還需要發(fā)布日期、評論等等。為每個相關(guān)的信息定義一個 prop 會變得很麻煩：
所以是時候重構(gòu)一下這個
Vue.component("blog-post", { props: ["post"], template: ` ` }){{ post.title }}
現(xiàn)在，不論何時為 post 對象添加一個新的屬性，它都會自動地在
上述的這個和一些接下來的示例使用了 JavaScript 的模板字符串來讓多行的模板更易讀。它們在 IE 下并沒有被支持，所以如果你需要在不 (經(jīng)過 Babel 或 TypeScript 之類的工具) 編譯的情況下支持 IE，請使用折行轉(zhuǎn)義字符取而代之。
6、監(jiān)聽子組件事件在我們開發(fā)
在其父組件中，我們可以通過添加一個 postFontSize 數(shù)據(jù)屬性來支持這個功能：
new Vue({
el: "#blog-posts-events-demo",
data: {
posts: [/* ... */],
postFontSize: 1
}
})
它可以在模板中用來控制所有博文的字號：
現(xiàn)在我們在每篇博文正文之前添加一個按鈕來放大字號：
Vue.component("blog-post", {
props: ["post"],
template: `
{{ post.title }}
`
})
問題是這個按鈕不會做任何事：當(dāng)點擊這個按鈕時，我們需要告訴父級組件放大所有博文的文本。幸好 Vue 實例提供了一個自定義事件的系統(tǒng)來解決這個問題。父級組件可以像處理 native DOM 事件一樣通過 v-on 監(jiān)聽子組件實例的任意事件：
同時子組件可以通過調(diào)用內(nèi)建的 $emit 方法 并傳入事件名稱來觸發(fā)一個事件：
有了這個 v-on:enlarge-text="postFontSize += 0.1" 監(jiān)聽器，父級組件就會接收該事件并更新 postFontSize 的值。
6.1 使用事件拋出一個值補充：vue中 關(guān)于$emit的用法
1、父組件可以使用 props 把數(shù)據(jù)傳給子組件。
2、子組件可以使用 $emit 觸發(fā)父組件的自定義事件。
vm.$emit( event, arg ) //觸發(fā)當(dāng)前實例上的事件 vm.$on( event, fn );//監(jiān)聽event事件后運行 fn；
有的時候用一個事件來拋出一個特定的值是非常有用的。例如我們可能想讓
然后當(dāng)在父級組件監(jiān)聽這個事件的時候，我們可以通過 $event 訪問到被拋出的這個值：
（1）整段代碼如下：
或者，如果這個事件處理函數(shù)是一個方法：
那么這個值將會作為第一個參數(shù)傳入這個方法：
methods: {
onEnlargeText: function (enlargeAmount) {
this.postFontSize += enlargeAmount
}
（2）整段代碼如下：
6.2 在組件上使用v-model
自定義事件也可以用于創(chuàng)建支持 v-model 的自定義輸入組件。記?。?/p>
等價于
當(dāng)用在組件上時，v-model 則會這樣：
為了讓它正常工作，這個組件內(nèi)的 必須：（1）將其 value 特性綁定到一個名叫 value 的 prop 上；（2）在其 input 事件被觸發(fā)時，將新的值通過自定義的 input 事件拋出
Vue.component("custom-input", {
props: ["value"],
template: `
`
})
現(xiàn)在 v-model 就應(yīng)該可以在這個組件上完美地工作起來了：
完整代碼如下：
7、通過插槽分發(fā)內(nèi)容和 HTML 元素一樣，我們經(jīng)常需要向一個組件傳遞內(nèi)容，像這樣：
Something bad happened.
可能會渲染出這樣的東西。幸好，Vue 自定義的
Vue.component("alert-box", {
template: `
Error!
8、動態(tài)組件
有的時候，在不同組件之間進行動態(tài)切換是非常有用的，比如在一個多標簽的界面里：
上述內(nèi)容可以通過 Vue 的
在上述示例中，currentTabComponent 可以包括：已注冊組件的名字，或 一個組件的選項對象
9、解析DOM模板時的注意事項有些 HTML 元素，諸如