组件数据的存放
组件自己的数据存放在哪里呢？
- 组件对象也有一个data属性(也可以有menthods属性)
- 只是这个data必须是一个函数
- 而且这个函数返回一个对象，对象内部保存数据
为什么data在组件中必须是一个函数呢？
- 首先，如果不是一个函数，Vue会直接报错。
- 其次，原因是在于Vue让每个组件对象都返回一个新的对象，因为如果是同一个对象，组件在多次使用的时候会相互影响。 以计时器为例：
<body>
<div id="app">
<cpn></cpn>
<cpn></cpn>
</div>
<template id="cpn">
<div>
<h2>当前数字:{{counter}}</h2>
<button @click="increase">+</button>
<button @click="decrease">-</button>
</div>
</template>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
},
components:{
cpn:{
template:'#cpn',
data(){
return {
counter:0
}
},
methods:{
increase(){
this.counter++
},
decrease(){
this.counter--
}
}
}
}
})
</script>
</body>
运行结果:
如果把data return的对象单独分离出来的话:
<body>
<div id="app">
<cpn></cpn>
<cpn></cpn>
</div>
<template id="cpn">
<div>
<h2>当前数字:{{counter}}</h2>
<button @click="increase">+</button>
<button @click="decrease">-</button>
</div>
</template>
<script src="../vue.js"></script>
<script>
const obj = {
counter:0
}
const app = new Vue({
el:'#app',
data:{
},
components:{
cpn:{
template:'#cpn',
data(){
return obj
},
methods:{
increase(){
this.counter++
},
decrease(){
this.counter--
}
}
}
}
})
</script>
</body>
运行结果：
