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