当我们定义这个 <button-counter>
组件时,你可能会发现它的 data 并不是像这样直接提供一个对象:
data: {
count: 0
}
取而代之的是,一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝:
data: function () {
return {
count: 0
}
}
案例:
Vue.component("zidingyi", {
template: "#tpl",
// 组件的data不能直接定义成对象 而是一个函数 让这个函数返回一个对象的定义代码
data: function () {
return {
name: "小白"
}
}
})
var v1 = new Vue({
el: "#app",
data: {}
})
<div id="app">
<zidingyi></zidingyi>
<zidingyi></zidingyi>
</div>
<template id="tpl">
<h1>我是一个{{name}}</h1>
</template>
【注】
为什么要返回一个对象的定义呢?
因为Vue在解析组件的时候会执行data的函数,如果返回的是一个其他地方的对象,那么这第一个组件的实例使用的是这个对象。如果该组件又有了一个实例,这个新实例依旧会使用同一个对象来作为自己的数据,那么就意味着一个数据对象对应两个组件。
如果返回的是对象的字面量定义代码,每当这个函数执行就会在内存中生成一个新的对象, 也就意味着每一个组件对应一个属于自己的数据对象。