- 组件是一个单独功能模块的封装：既可以有属于自己的HTML模板，也可以有属性自己的数据data和方法methods。
- 组件中不能直接访问Vue实例中的data
一丶组件的数据存放
- Vue组件有自己保存数据的地方：
组件对象中声明一个data属性
这个data属性必须是一个函数
而且这个函数的返回一个对象，对象内部保存着数据
- 组件data必须是函数
如果我们的data不是一个函数，函数不返回一个对象
不同复用处的组件的数据，都会随着一处的更改而全部都改，就没有独立性。
如果组件data使用函数，返回一个对象，对象中装数据
这样的话，每次复用引入该组件时，该组件的数据在都会独立开辟一个空间存储自己的数据，组件间相同数据，互不影响
- 总结：如果组件的data不是函数返回一个对象的话，该组件在不同处复用，复用的所有组件的数据，都会随着一处的更改而全部都改，就没有独立性
二、代码
<!--作者：ikunsdc-->
<!--开发时间：2021/02/28 19:53-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<cpn_count></cpn_count>
<cpn_count></cpn_count>
<cpn_count></cpn_count>
</div>
<template id="cpn">
<div>
<h2>当前计数：{
{counter}}</h2>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//1.注册全局组件
Vue.component('cpn_count',{
template:'#cpn',
data(){
return{
counter:0
}
},
methods:{
increment(){
this.counter++
},
decrement(){
this.counter--
}
}
})
const app = new Vue({
el:"#app",
data:{
}
})
</script>
</body>
</html>
三、运行
