组件是不可以访问Vue实例的数据的，如下
那么我们就可以得出一个结论，vue组件应该有自己保存数据的的地方
这个地方就是放在组件里的data属性
但是这个data不是个对象属性，而是一个函数function，返回一个对象实例
那么为什么组件里的data必须是个函数
先看一个例子
<div id="app">
<cmp></cmp>
<cmp></cmp>
<cmp></cmp>
</div>
<body>
<template id = "cmpt">
<div>
<span>当前计数 {{count}}</span>
<button @click = "add" :disabled ="count>=3">+</button>
<button @click = "rdc">-</button>
</div>
</template>
<script>
Vue.component('cmp',{
template:"#cmpt",
data(){
return {
count:0
}
},
methods:{
add(){
this.count++
},
rdc(){
this.count--
}
}
})
var vm = new Vue({
el: '#app',
data: {
count: 0
},
methods: {
}
});
</script>
</body>
这些代码创建了三个组件实例，但是这三个组件实例是共享同一个data吗，肯定不是，函数执行的时候都会在栈创建不同的内存地址，这就是用data函数的原因，因为他们不会共享data所以就不会相互影响，如果这三个实例共享count，那么你点其中一个button，其他实例的count也会变
有些时候需要共享怎么办，下列方法可解决
const obj = {
count :0
}
Vue.component('cmp',{
template:"#cmpt",
data(){
return obj
},
