vue中data的两种写法
vue中的data是写为对象好还是函数好data为对象的写法data为函数的写法组件中访问data组件的data属性是一个对象的情况会访问不到data中的数据组件的data属性必须是一个函数且返回一个对象为什么组件的data属性必须是一个函数且返回一个对象data为对象的写法data:{message: '此时mustache表达式是通过data为对象来获取message的值'}data为函数的写
·
vue中的data是写为对象好还是函数好
data为对象的写法
data:{
message: '此时mustache表达式是通过data为对象来获取message的值'
}
data为函数的写法
data(){
return{
message: '此时mustache表达式是通过data为函数来获取message的值'
}
}
组件中访问data
组件对象也有一个data属性(也可以有methods等属性)，只是组件的data属性必须是一个函数且这个函数返回一个对象，对象内部保存着数据
组件的data属性是一个对象的情况会访问不到data中的数据
组件的data属性必须是一个函数且返回一个对象
<body>
<div id="app">
<t1></t1>
</div>
<template id='template1'>
<div>
<h2 style='color:blue'>我是模板1</h2>
<p style="color:red;font-size:50px">{{mm}}</p>
</div>
</template>
<script>
new Vue({
el: '#app',
data:{},
components:{
t1:{
template:'#template1',
data(){
return{
mm:'逗你玩'
}
}
}
}
})
</script>
</body>
为什么组件的data属性必须是一个函数且返回一个对象
组件可以重复使用，当一个组件使用多次，就会多次访问一个data数据，从而类似共享复用。如果组件的data属性不是一个函数且返回一个对象，在这种一个组件多次使用的情况下就会共享一个数据。
下面的例子就可以说明data属性是一个函数且返回一个对象的好处：
<body>
<div id="app">
<t1></t1>
<t1></t1>
<t1></t1>
<t1></t1>
</div>
<template id='template1'>
<div>
<button @click="count--">-</button>
计数:{{count}}
<button @click="count++">+</button>
</div>
</template>
<script>
new Vue({
el: '#app',
data:{},
components:{
t1:{
template:'#template1',
data(){
return{
count:0
}
}
}
}
})
</script>
</body>
基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。
更多推荐
21
0- 0
已为社区贡献1条内容
所有评论(0)