三个数字会同时增长
<div id="app">
<my-com></my-com>
<my-com></my-com>
<my-com></my-com>
</div>
var msg = {
count: 0
};
Vue.component('myCom', {
template: '#myTem',
data: function () {
return msg;
},
methods: {
add: function () {
this.count++;
}
}
});
如果每个组件,都返回一个自己的对象,则不会有这样的问题。
组件会被用来创建多个实例,如果data是个纯粹的对象,那么所以实例将会引用同一个数据对象。所以每个组件都返回了一个新的初始变量,这样组件间不会互相干扰。
Vue.component('myCom', {
template: '#myTem',
data: function () {
return {
count: 0
}
},
methods: {
add: function () {
this.count++;
}
}
});