vue中data的两种写法

最新推荐文章于 2024-10-02 22:44:38 发布

Brrby

最新推荐文章于 2024-10-02 22:44:38 发布

阅读量4.6w

点赞数 21

分类专栏： vue 文章标签： vue javascript

本文链接：https://blog.csdn.net/qq_30433703/article/details/109312110

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

vue中的data是写为对象好还是函数好

data为对象的写法
data为函数的写法
组件中访问data
- 组件的data属性是一个对象的情况会访问不到data中的数据
- 组件的data属性必须是一个函数且返回一个对象
为什么组件的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>