Vue.component('my-component', {
 template: '<span>{{ message }}</span>',
 data: {
 message: 'hello'
 }
})

<div id="example-2">
 <simple-counter></simple-counter>
 <simple-counter></simple-counter>
 <simple-counter></simple-counter>
</div>
var data = { counter: 0 }
Vue.component('simple-counter', {
 template: '<button v-on:click="counter += 1">{{ counter }}</button>',
 ```
 // 技術上 data 的確是一個函數(shù)了，因此 Vue 不會警告，
 // 但是我們卻給每個組件實例返回了同一個對象的引用
 ```
 data: function () {
 return data
 }
})
new Vue({
 el: '#example-2'
})

Vue.component('xxx',{
template:'{{counter}}',
data:function(){
return counter=0;
}
})

//以下代碼中，組件中的count和Vue中的count是一樣的變量名，但是在組件中只會顯示0而不是2
Vue.component('simple-counter',{
    template:'<button>{{count}}</button>',
    data:function(){
     return count=0;

    }

   });
   vm=new Vue({
    el:'#example-2',
    data:{
     count:2

    }

   })

var component=function(){}//為了讓組件有自己的作用域，它必須包含私有變量data，所以簡單化的理解應該是這樣的

var component=function(){
this.data=this.data();//存在私有的data屬性
}

component.propotype.data=function(){
return {count:0}
}
//當我們在template中使用數(shù)據(jù)的時候，我們是調(diào)用的component的私有變量data
//如果我們不以函數(shù)的形式處理又會如何呢？
var component=function(){
//不存在私有的data屬性
}
component.propotype.data= {count:0}
//此時，data不作為私有變量，就會有暴露的風險，而且，它指向的是{count:0}的引用，所以當重復創(chuàng)建組件的時候，component的data都指向了同一個引用。因此會相互影響。

function component(d) {

    this.data = d;
   }
var com = new component({
    count: 1
   });
   var com1 = new component({
    count: 1
   });