vue组件中data为什么必须是个函数
<body>
<div id="app">
<counter></counter>
</div>
<template id="temp1">
<div>
<input type="button" value="+1" @click="increment">
<h3>{{count}}</h3>
</div>
</template>
<script type="text/javascript">
var dataObj = {count: 0};
Vue.component('counter',{
template:'#temp1',
data(){
return dataObj
},
methods:{
increment() {
this.count++
}
}
})
var vm = new Vue({
el: "#app",
data:{},
methods: {}
})
</script>
</body>
分析如上代码：
1、首先创建一个名字为counter的组件，data函数中返回一个外部定义的对象的值，如果直接给data属性设置一个对象而不是函数，那么会在浏览器中直接报错
2、在浏览器中运行代码
每次点击+1按钮，下边的值就会加一
3、如果我们在页面上同时使用三个counter组件
<div id="app">
<counter></counter>
<hr>
<counter></counter>
<hr>
<counter></counter>
<hr>
</div>
然后在浏览器中再次浏览
点击任意一个+1按钮，三个数同时变化。因为它们都指向了同一个对象。我们当然希望点击不同的按钮只实现当前组件内数据的变化，那么，我们在函数中返回一个对象，每次创建一个组建的时候，在内存中同时开辟一块空间给当前组件存放data，这样，就不会出现共用一个data的现象。我们只需将如上代码进行一点更改
data: function (){
//return dataObj
return{
count：0
}
},
vue组件中data为什么必须是个函数的更多相关文章
- vue组件中data为什么必须是一个函数？
因为JavaScript的特性所导致,在component中,data必须以函数的形式存在,不可以是对象. 组建中的data写成一个函数,数据以函数返回值的形式定义,这样每次复用组件的时候,都会返回一 ...
- Vue 组件中 data 为什么必须是函数
原文地址 vue组件中的data必须是函数 类比引用数据类型 Object是引用数据类型,如果不用function 返回,每个组件的data 都是内存的同一个地址,一个数据改变了其他也改变了; jav ...
- 怎样理解 Vue 组件中 data 必须为函数 ?
组件意在 复用 , 若为 对象, 则会相互干扰. 且 Vue 不允许此事发生, 规定必须为函数, 否则报错. 原理如下 对象 // 模拟创建组件 var Component= function() { ...
- vue组件中data是个函数
当我们const vm = new Vue({ el : '#app', data : { msg:‘hello World’ } })用习惯了,data是一个对象,可到了vue组件 Vue.co ...
- Vue组件里面data为什么必须是个函数
在创建或注册模板的时候,传入一个data属性用来绑定数据,但是在组件中,data必须是一个函数,而不能直接把对象赋值给它. export default { name:'app', data(){ r ...
- 039——VUE中组件之子组件中data使用实例与text-xtemplate的使用方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 15.Vue组件中的data
1.组件中展示数据和响应事件: // 1. 组件可以有自己的 data 数据 // 2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象 // 3. 但是组件中 ...
- vue组件中的data为什么是函数？
一.vue组件中的data为什么是函数 为了保证组件的独立性 和 可 复用性,data 是一个函数,组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,你实例化几次, ...
- Vue组件中引入jQuery
一.安装jQuery依赖 在使用jQuery之前,我们首先要通过以下命令来安装jQuery依赖: npm install jquery --save # 如果你更换了淘宝镜像,可以使用cnpm来安装, ...
随机推荐
- CentOS7 安装配置 MySQL 5.7
1. 下载 yum 源文件 mysql80-community-release-el7-2.noarch.rpm https://dev.mysql.com/downloads/repo/yum/ 2 ...
- 升级：DNAtools for Excel工具箱，2.x英文版- VBA代码破解工具
原始出处:www.cnblogs.com/Charltsing/p/DnaTools.html QQ:564955427 DNA工具箱全部功能一览: 单元格焦点指示(支持Excel 2007~2 ...
- Java NIO技术总结
一.背景 大家都知道Java BIO,其全称是java blocking IO,相对的Java NIO 全称为java non-blocking IO.顾名思义,java nio 是一种非阻塞IO.N ...
- LVS实现负载均衡原理
负载均衡集群是load balance 集群的简写.常用的负载均衡开源软件有nginx.lvs.haproxy,商业的硬件负载均衡设备有F5.NetsNetscale.这里主要是学习lvs. === ...
- 其他综合-内网下Yum仓库搭建配置
内网下Yum仓库搭建配置 1.实验环境 虚拟机环境: VMware 12 版本虚拟机 网络环境: 内网 IP 段:172.16.1.0 外网 iP 段(模拟):10.0.0.0 实验基础:(能够上网, ...
- 空数组判断false、true的情况
- 2019中山大学程序设计竞赛 Triangle
今天水了一发hdu上的中山校赛 这个题交了将近十遍才过...... 就是说给 n 个木棍,如果能找出3个能组成三角形的木棍就输出yes 反之输出no 乍一看很简单 一个排序遍历一遍就好了 但是n值太大 ...
- String.Join Method
Overloads Join(String, String[], Int32, Int32) Concatenates the specified elements of a string array ...
- word 2013 标题设置多级列表
1.问题 要设置标题为多级列表,批量应用 2.解决 1选标题1 2选标题2 ...以此类推.点确定保存即可
- UnicodeDecodeError: 'ascii' codec can't decode byte 0xa0 in position 0: ordinal not in range(128)