记录一下vue组件的使用，以及组件中data为一个函数的作用

前言：为了减少代码冗余，增加代码复用性，避免重复造轮子等问题，vue.js中引入了组件化开发的模式。

当一段代码需要重复使用，并且还存在不同页面复用的情况，我们就可以把这段代码封装在组件中。先上代码

html

<div id="app">
	<my-com></my-com>
	<my-com></my-com>
	<my-com></my-com>
</div>
		
<template id="tmp">
	<div>
		<p>当前数: {{count}}</p>
		<button @click="count++">+</button>
		<button @click="count--">-</button>
	</div>
</template>

首先是一个id为tmp的模板

js

Vue.component('my-com', {
	template: '#tmp',
	data() {
		return {
			count: 0
		}
	}
})
			
const app = new Vue({
	el: '#app'
})

定义一个全局组件，模板值与上面的id绑定，这样一个基本的组件就创建好了。模板封装的是一个计数器，点击按钮可以将count值 自增或者自减

在页面中渲染三个组件，可以看到，每一个count的作用域都是独立存在的，也就是他们的内存地址是不同的，所以进行自增或者自减，不会影响到其他的count值.这就是为什么组件中data定义成一个函数的原因。如果将组件中的data定义成一个对象就会报错，因为vue.js内部已经规定好了。不过可以在外部定义一个对象，然后引用在data中，下面来实现一下。

只需要把count放入在一个全局对象中，每次组件的data函数返回这个对象，每次返回的都是同一个作用域，所以对其中一个count值操作将会影响到全部的count

我们肯定不希望它们的作用域相同，假如在页面A改变了count，页面B的count值也跟着改变，这样会造成很多麻烦。所以组件中的data是一个函数，每次返回不同的作用域，互不影响。