資訊專欄INFORMATION COLUMN
摘要：全局注冊使用定義組件，參數為一個包含了被定義組選項的對象。雖然它是個函數，但我們卻給每個組件實例返回了同一個對象的引用每次返回同一個對象的引用，組件之間會互相污染。
全局注冊
使用Vue.extend(options)定義組件，參數為一個包含了被定義組選項的對象。
使用Vue.component(id,[definition])注冊定義好的組件，id為該組件名稱。
[definition]既可以是一個extend()返回的實例，也可以是一個包含組件選項的對象（將會自動調用extend()方法）。
使用kebab-case命名組件
var mybtn = Vue.extend({
template: "",
data: function () {
return { text: "使用extend自定義一個按鈕" }
}
})
/**方式一 */
Vue.component("my-btn-1", mybtn)
/**方式二 自動調用extend()*/
Vue.component("my-btn-2", {
template: "",
data: function () {
return {text: "使用選項對象自定義一個按鈕"}
}
})
new Vue({
el: "#app-1"
})
注冊了組件，必須要有一個根實例，如果要在根實例中使用我們的組件，那么必須在此根實例初始化之前注冊
在extend()中設置的data選項必須是一個函數。以上Vue實例app-1的
在根實例的components選項上注冊一個組件。該組件只在此根實例中使用。
new Vue({
el: "#app-2",
components:{
"my-btn-1":mybtn
}
})
//or
new Vue({
el: "#app-3",
components: {
"my-btn-2": {
template: "",
data: function () {
return { text: "使用選項對象自定義一個按鈕" }
}
}
}
})
data屬性
上面說過，定義組件的data選項不能是對象，必須是個函數。這是因為如果是對象，那么會給每一個組件實例返回同一個"data"對象引用，組件實例之間造成污染，這不是我們想見到的。
var data = { counter: 0 }
new Vue({
el: "#app-3",
components: {
"component-3-1": {
template:"",
//雖然它是個函數，但我們卻給每個組件實例返回了同一個對象的引用
data: function(){
return data
}
},
"component-3-2": {
template:"",
data: function(){
return {counter:0}
}
}
}
})
component-3-1每次返回同一個對象的引用，組件之間會互相污染。
component-3-2每次返回一個新對象，組件之間解耦。
像