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来安装, ...
随机推荐
- ubuntu18.04修改网卡名称为eth0
1.修改grub文件 vim /etc/default/grub 查找 GRUB_CMDLINE_LINUX="" 修改为 GRUB_CMDLINE_LINUX="net ...
- 查看redis连接数
在redis-cli命令行使用:info clients可以查看当前的redis连接数. 如下图: config get maxclients 可以查询redis允许的最大连接数. 如下图:
- 003_python中key为中文的处理
由于统计域名资产信息时,部门名称是中文的,但是还需要用这个部门名称进行字符的匹配运算,但不进行转换处理的话,它会报以下的错误: 解决方法如下: # -*- coding: utf-8 -*- all_ ...
- 通知实战 设置通知图片(iOS10以后的)
解释两个基本扩展(Notification Content.Notification Service) Notification Content其实是用来自定义长按通知显示通知的自定义界面 Notif ...
- 【动态规划】 EditDistance
思路参考: https://www.cnblogs.com/littlepanpc/p/7895810.html 代码参考:https://leetcode.com/problems/edit-dis ...
- python工程师成长之路精品课程（全套）
python工程师成长之路精品课程(全套) 有需要联系我:QQ:1844912514 什么是Python? Python是一门面向对象的编程语言,它相对于其他语言,更加易学.易读,非常适合快速开发. ...
- array数组(n,1)和(n,)互相转换
data.shape #(172,1) result = [arr[0] for arr in data] result.shape #(172,) (172,1)表示是一个(172,1)shape大 ...
- 用ES6创建一个简单工厂模式
1 什么是工厂模式? 工厂模式是用来创建对象的一种最常用的设计模式.我们不暴露创建对象的具体逻辑,而是将将逻辑封装在一个函数中,那么这个函数就可以被视为一个工厂.工厂模式根据抽象程度的不同可以分为:简 ...
- Lua中ipairs和pairs的区别详解
迭代器for遍历table时,ipairs和pairs的区别: 区别一:ipairs遇到nil会停止,pairs会输出nil值然后继续下去 区别二: , b = , x = , y = , " ...
- jquery 设置 transform/translate 获取 transform/translate 的值
//获取 transform 值 var reg=/matrix.(((-)?([0-9]+.)?\d+([, ]+)?){6})./g; var str= progressUI.css(" ...