（二十五）組件的定義
①組件的作用：
【1】擴展HTML元素，封裝可重用的代碼；
【2】組件是自定義元素，Vuejs的編譯器可以為其添加特殊的功能；
【3】某些情況下，組件可以是原生HTML元素的形式，以is的方式擴展。
②寫一個標準的組件：
分為以下幾步：
【1】掛載組件的地方，需要是Vue實例所渲染的html元素，具體來說，比如上面的
這樣的html元素及他的子節點；
【2】定義一個組件，用
var 變量名 = Vue.extend({template:”這裡是html的模板內容”})
這樣的形式創建，例如：
//定義一個組件
var btn = Vue.extend({
template:
})
【3】將定義的組件註冊到Vue實例上，這會讓指定標簽，被組件的內容所替代。
如代碼：
//註冊他到Vue實例上
Vue.component("add-button", btn);
具體而言，每一個以下這樣的標簽（在Vue的根實例范圍內的）
會被所替代。
【4】以上方法是全局註冊（每個Vue實例的add-button標簽都會被我們定義的所替代）；
解決辦法是局部註冊。
如代碼：（這是是設置瞭template屬性，也可以在沒有這個屬性的時候，在
標簽內放置標簽
<script>
//定義一個組件
var btn = Vue.extend({
template: “”
})
Vue.component(“add-button”, btn);
//創建根實例，也就是說讓Vue對這個根生效
var vm = new Vue({
el: '#app',
template: “”
});
</script>
③局部註冊組件：
簡單來說，隻對這一個Vue實例生效，具體做法是，在註冊那一步，跳過；
然後在聲明Vue實例的時候，將添加到components這個屬性中（他是一個對象，以KV形式放置）（註意，這個單詞多一個s）
如代碼：
<script>
//定義一個組件
var btn = Vue.extend({
template: “”
})
//創建根實例，也就是說讓Vue對這個根生效
var vm = new Vue({
el: '#app',
template: “”,
components: {
“add-button”: btn
}
});
</script>
註：
根據官方教程，這種方法（指局部註冊），也適用於其他資源，比如指令、過濾器和過渡。
④步驟簡化：
【1】定義組件和註冊組件結合起來一步完成：
//定義一個組件
Vue.component("add-button", {
template:
});
【2】局部註冊時，定義和註冊一步完成：
//創建根實例，也就是說讓Vue對這個根生效
var vm = new Vue({
el: '#app',
template: "",
components: {
"add-button": {
template:
}
}
});
⑤data屬性
直接給組件添加data屬性是不可以的（無效）；
原因在於，假如這麼幹，那麼組件的data屬性有可能是一個對象，而這個對象也有可能是外部傳入的（例如先聲明一個對象，然後這個對象作為data的值），可能導致這個組件的所有副本，都共享一個對象（那個外部傳入的），這顯然是不對的。
因此，data屬性應該是一個函數，然後有一個返回值，這個返回值作為data屬性的值。
且這個返回值應該是一個全新的對象（即深度復制的，避免多個組件共享一個對象）；
如代碼：
var vm = new Vue({
el: '#app',
template: "",
components: {
"add-button": {
template:
data: function () {
return {btn: "123"};
}
}
}
});
另外，假如這樣的話，btn的值是一樣的（因為他們實際上還是共享瞭一個對象）
註：
el屬性用在Vue.extend()中時，也須是一個函數。
⑥is特性：
【1】按照官方教程，一些HTML元素對什麼元素可以放在它之中是有限制的；
但實際我自己測試沒發現問題，所以不明白。
【2】給個URL吧，如果真出問題瞭我再回頭研究。
https://cn.vuejs.org/guide/components.html#u6A21_u677F_u89E3_u6790
