组件中的数据存放问题与data为什么是函数

1.组件中的数据存放问题

组件里面不能访问vue实例的数据 

 

<template id="cpn">
  <div>
    <h2>{{message}}</h2>
    <p>内容1</p>
  </div>
</template>

<div id="app">
  <cpn></cpn>
  <cpn></cpn>
</div>

 data需要写在这个代码里面，且是返回实例对象的函数形式，不像vue示例里面一样是对象类型

 Vue.component("cpn",{})

如果写成了对象类型，报错如下： 

 

 正确写法：

  Vue.component("cpn",{
    template:"#cpn",
    data(){
      return{
        message:"abc"
      }
    }
  })

2.实现组件封装计数器

因为计数器原理简单，直接写不用函数也可以

    <button @click="counter++">+</button>
    <button @click="counter--">-</button>

<div id="app">
<cpn></cpn>
</div>

<template id="cpn">
  <div>
    <h2>当前计数：{{counter}}</h2>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  // 1.注册组件
  Vue.component("cpn",{
    template:"#cpn",
    data(){
      return {
        counter: 0
      }
    },
    methods:{
      increment() {
        this.counter++
      },
      decrement() {
        this.counter--
      },
    }
  })

 3.为什么组件data必须是函数而非对象

 三个cpn实例非同一个data，因为data是函数，所以避免了counter值互相影响

<div id="app">
<cpn></cpn>
  <cpn></cpn>
  <cpn></cpn>
</div>

如果想要数据同时被影响，也就是data是对象类型