组件的本质可以说是一个可复用的vue实例，所以一个组件创建后就可以在各个地方多次复用，但组件中的data数据应该是互不影响的。
<div id="app">
<!--现在组件复用了三次-->
<cpn></cpn>
<cpn></cpn>
<cpn></cpn>
</div>
<template id="cpn">
<div>
<h2>{{msg}}</h2>
<button @click="msg++">增加</button>
</div>
</template>
Vue.component('cpn',{
template:cpn,
//当创建了多个组件实例，每次复用都会返回新的对象，内存地址是不一样的
data(){
return {
msg:0
}
}
})
结果：
msg互不影响
为了实现这一目标，vue利用了js的特性，data数据是以函数返回值的形式来定义，复用一次组件，就会返回一份新的data对象，于是每个组件实例都有了自己的作用域。如果data写成对象形式，因为内存地址是一样的，一个数据变了，其他地方都会变。
网友评论