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>

# javascript
Logo
View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

cover

vue+element ui实现好看的登录界面

avatar ViewDesign

vue3.0中使用elementUi(element-plus的使用)

element-plus的使用小朋友，你是不是有很多问号❓❓❓甲：为什么在vue3.0中不能使用Element UI了？乙：由于vue3.0在插件install函数的入参从Vue原型（类）改成了app（vue实例），导致element-ui中Vue.prototype.* 这样的代码已经全都失效了。所以element-ui铁定是不兼容了。甲：那有什么方法能解决吗？乙：使用Element UI的升级

avatar ViewDesign

ElementUI 整体页面布局

一、概述一般后台页面的顶部导航栏和左侧导航栏一般是固定的，我们可以布局成下面的样式二、整体项目布局因为我们的首页是个公共的组件，点击首页，会员管理，都不会变，所以我们可以放在一个单独文件夹里面。需要分别对头部，左侧区域，主区域拆分成不同的文件。创建项目创建一个全新的ElementUI 项目，请参考链接：https://www.cnblogs.com/xiao987334176/p...

avatar ViewDesign