组件可以访问Vue实例数据吗?
答案是： 不行！，我们都说组件的复用了，所以呢 组件访问不了VUE实例中的data 数据，如果访问会报错 我试过了：
vue.js:635 [Vue warn]: Property or method "a" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <MCpn>
<Root>
组件中的数据是保存在哪里呢？顶层的Vue实例中吗？
我们发现不能访问，而且即使可以访问，如果 将所有的数据都放在Vue实例中，Vue实例就会 变的非常臃肿。
结论：Vue组件应该有自己保存数据的地方。
这里说我a没定义，那么怎么样去访问呢：
组件对象也有一个data属性(也可以有methods等属性，下面我们有用到)
只是这个data属性必须是一个函数
而且这个函数返回一个对象，对象内部保存着数据
为什么data必须是一个函数呢？ 因为组件的复用性，组件必须要有独立的数据 ，换句话说 每个组件都要是独立的，如果都共享一个数据，那么一改全改那就很不安全什么的，，，，，
代码：
<template id="bihu">
<div>
<!-- 这里访问后台data 的 a 和 b -->
<h2>{{a}}</h2>
<p>{{b}}</p>
</div>
</template>
<div id="app">
<cpn></cpn>
</div>
<script src="vue.js"></script>
<script>
//注册一个全局组件
Vue.component('cpn',{
template:"#bihu",
data(){
return {a:"我是a",b:"我是b"}
}
})
const app = new Vue({
el:"#app"
})
</script>
看见没 ，组件也有data属性，但是他一定要是个函数(上面是ES6写法)，返回的是对象，里面保存着数据。
其实不止data属性 还有methods属性，里面可以定义方法， 【我们学习要温故而知新】
下面写个例子： 组件开发计数器：
<template id="calc">
<div>
<h2>计数器</h2>
<p>当前数：{{count}}</p>
<input type="button" value="+" @click="add">
<input type="button" value="-" @click="sub">
</div>
</template>
<div id="app">
<calc></calc>
</div>
<script src="vue.js"></script>
<script>
const app = new Vue({
el:"#app",
components:{
'calc':{
template:"#calc",
data(){
return {
count:0
}
},
methods:{
add(){
this.count++;
},
sub(){
this.count--;
}
}
}
}
})
</script>
所以你可以尝试 多用几个calc标签 就有多个计数器 但是里面的数据都是独立的 ，每个人的数字通过点击都不一样
作者：咸瑜
APP 