全局组件中的data使用方式:
js中写法:
Vue.component("mycom1",{
template:'<h1>这是全局组件--{{msg}}</h1>',
data:function () {
return {
msg:'这是全局组件中的data定义的数据'
}
}
});
var vm = new Vue({
el:"#newBrand",
data:{},
});
html中写法:
<div id="newBrand">
<mycom1></mycom1>
</div>
效果:
注:为什么组件中的data一定是一个function?
为了每个实例可以维护一份被返回对象的独立的拷贝,如果 Vue 没有这条规则,点击一个按钮就可能会整体同时更新,如: