组件数据的存放
- 组件对象也有一个data属性(也可以有methods等属性)
- 只是这个data属性必须是一个函数
- 而且这个函数返回一个对象,对象内部保存着数据
以计数器为例 将计数器写为一个小组件
<body>
<div id="app">
<cpn></cpn>
<cpn></cpn>
<cpn></cpn>
</div>
<template id="cpn">
<div>
<h2>当前计数:{{counter}}</h2>
<button @click="increament">+</button>
<button @click="decreament">-</button>
<!-- 不可以写进Vue实例里面 -->
</div>
</template>
<script src="../js/vue.js"></script>
<script>
Vue.component('cpn', {
template: '#cpn',
data() {
return {
counter: 0
}
},
methods:{
increament(){
this.counter++
}, decreament(){
this.counter--
}
}
})
const app = new Vue({
// 指定控制的区域
el: '#app',
data: {
// title:'我是标题'
},
computed: {},
methods: {},
components: {
}
});
</script>
</body>
三个组件实例是不是共用一个data对象?
不是
因为data是一个函数,在创建组件时调用data函数,在每次调用时都会return一个对象
一旦data不是函数而是一个对象,则每次创建一个新的组件时返回的是同一个data对象,这样各组件就会相互影响。比如,把以第一个计数器+1 则第二个第三个也被修改了,引发连锁反应。
在开发中避免引起这样的连锁反应,data必须是一个函数,返回的是一个对象。(面试)