摘要：全局注册使用定义组件，参数为一个包含了被定义组选项的对象。虽然它是个函数，但我们却给每个组件实例返回了同一个对象的引用每次返回同一个对象的引用，组件之间会互相污染。
全局注册
使用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每次返回一个新对象，组件之间解耦。
像