vue.js的组件的data属性

每个组件也像每个Vue实例拥有自己的data属性和methods方法

<div id="app">
    <cpn></cpn>
  </div>
  <template id="cpn">
    <div>
      <h2>我是组件</h2>
      <h3>目前计数：{{count}}</h3>
    </div>
  </template>
  <script>
	  // 注册组件
	  Vue.component('cpn',{
		  template: '#cpn',
		  //组件的data不是一个对象，而必须是一个函数
	      data() {
			  	return {
			  		count: 0
	        }
      })
  	const app = new Vue({
		  el: '#app',
		  data: {
			  msg: '欢迎使用Vue.js'
		  }
	  })
  </script>

一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。

<div id="app">
    <cpn></cpn>
    <cpn></cpn>
    <cpn></cpn>
  </div>
  <template id="cpn">
    <div>
      <h2>我是组件</h2>
      <h3>目前计数：{{count}}</h3>
      <button @click="add">+</button>
      <button @click="reduce">-</button>
    </div>
  </template>
  <script>
	  // 注册组件
	  Vue.component('cpn',{
		  template: '#cpn',
	      data() {
		  	return {
		  		count: 0
	        }
	      },
	      methods: {
		      add() {
		      	this.count++
		      },
		      reduce() {
		      	this.count--
	      }
      }
	})
  	const app = new Vue({
		  el: '#app',
		  data: {
			  msg: '欢迎使用Vue.js'
		  }
	  })
  </script>

在app实例中多次使用了组件，但是组件中的data是一个函数，且每次使用的组件，它的data函数返回的对象值是不同的内存地址，所以组件多次使用时，data的返回的对象中的值只是当前组件的值，不会改变其他正在使用中的组件的data。