vue在创建多个组件或实例的时候,如果相互之间的数据不是共享的,一定要用一个函数创建data,而不是之间返回一个数据对象的引用,否则会出现多个组件之间数据共享的尴尬
<div id="components-demo3" class="demo">
<button-counter2></button-counter2>
<button-counter2></button-counter2>
<button-counter2></button-counter2>
</div>
<script>
var buttonCounter2Data = {
count: 0
}
Vue.component('button-counter2', {
data: function () {
// data 选项是一个函数,组件不相互影响
return {
count: 0
}
},
/*
data: function () {
// data 选项是一个对象,会影响到其他实例
return buttonCounter2Data
},*/
template: '<button v-on:click="count++">点击了 {{ count }} 次。</button>'
})
new Vue({ el: '#components-demo3' })
</script>