27. 组件可以访问Vue实例数据，如何访问？ 实现响应式。

组件可以访问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">
        &nbsp;&nbsp;&nbsp;&nbsp;
        <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标签 就有多个计数器 但是里面的数据都是独立的  ，每个人的数字通过点击都不一样