组件中data为什么是函数

最新推荐文章于 2024-04-18 14:24:17 发布

初晨未凉

最新推荐文章于 2024-04-18 14:24:17 发布

阅读量429

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_45638909/article/details/113620529

版权

笔记专栏收录该内容

59 篇文章 1 订阅

订阅专栏

data是一个函数，但是返回的是一个对象，如果data直接是一个对象，会造成联动反应，即改变其中一个组件中的数据，其他的数据也会进行变化

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<cpn></cpn>
			<cpn></cpn>
			<cpn></cpn>
		</div>
		<template id="cpn">
			<div>
				<h2>当前计数{{count}}</h2>
			   <button @click="pre()">+</button>
			   <button @click="nex()">-</button>
			 </div>
		</template>
		<script type="text/javascript" src="../js/vue.min.js"></script>
		<script type="text/javascript">
			Vue.component('cpn',{
			   template:'#cpn',
			   //这个data是一个函数，每次调用这个函数的时候，生成的是不同的对象
			   //可以这么理解,下面这三个对象的内存地址是不一样的，因此三个数据是互不影响的，不会产生数据联动
			   //通俗点来说，你可以理解为三个人互不影响
			   // function abc(){   
			   // }
			   //var a1 = new abc();
			   //var a2 = new abc();
			   //var a3 = new abc();
			  data(){
				  return {
					  count : 0
				  }
			  },
			  methods:{
				  pre(){
					 count =  this.count++
				  },
				  nex(){
					 count =  this.count--
				  }
			  }
			})
			var app = new Vue({
				el:'#app'
			})
		</script>
	</body>
</html>

在这里插入图片描述
联动反应的结果（牵一发动全身）

初晨未凉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
组件中data为什么是函数

data是一个函数，但是返回的是一个对象，如果data直接是一个对象，会造成联动反应，即改变其中一个组件中的数据，其他的数据也会进行变化<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <cpn></cpn&gt
复制链接

扫一扫