深入理解--VUE组件中数据的存放以及为什么组件中的data必需是函数
1、组件中数据的存放
***（重点）组件是一个单独模块的封装：这个模块有自己的HTML模板，也有data属性。
只是这个data属性必需是一个函数，而这个函数返回一个对象，这个对象里面存放着组件的数据。
<template id="MyCpn">
<div>
<h2>组件数据的存放 </h2>
<p>{{title}}</p>
</div>
</template>
<script>
Vue.component('cpn', {
template: '#MyCpn',
data() {
return {
title: '我是组件中的专属数据'
}
}
// 组件是一个单独模块的封装：这个模块有自己的HTML模板，也有data数据。
})
***完整代码***
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<div id="app">
<cpn></cpn>
</div> <body>
<template id="MyCpn">
<div>
<h2>组件数据的存放 </h2>
<p>{{title}}</p>
</div>
</template>
<script>
Vue.component('cpn', {
template: '#MyCpn',
data() {
return {
title: '我是组件中的专属数据'
}
}
// 组件是一个单独模块的封装：这个模块有自己的HTML模板，也有data数据。
})
let vm = new Vue({
el: '#app',
data: () => ({
title: "我是顶层Vue实例中的数据，外部组件能访问我的数据吗？"
})
})
</script>
</body> </html>
解析：当你在调用title变量的时候，只能访问到组件内部定义的变量，因为组件是一个单独模块的封装。
2、为什么组件中的data必需是函数
因为组件是要重复使用的，当data是函数并且在多次调用的时候，所占的内存块不一样，所以data中的数据互不影响。
****完整代码****
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<div id="app">
<cpn></cpn>
<cpn></cpn>
<cpn></cpn>
</div> <body>
<template id="MyCpn">
<div>
<h2>当前计数:{{content}}</h2>
<button @click="res">-</button>
<button @click="add">+</button>
</div>
</template>
<script>
Vue.component('cpn', {
template: '#MyCpn',
data() {
return {
content: 0
}
},
methods: {
add() {
this.content++
},
res() {
this.content--
}
}
})
let vm = new Vue({
el: '#app',
data: () => ({
title: "我是顶层Vue实例中的数据，外部组件能访问我的数据吗？"
})
})
</script>
</body> </html>
反过来，如果data不是用函数的话，在多次调用组件的时候，这里面的数据相互影响
***完整代码****
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<div id="app">
<cpn></cpn>
<cpn></cpn>
<cpn></cpn>
</div> <body>
<template id="MyCpn">
<div>
<h2>当前计数:{{counter}}</h2>
<button @click="res">-</button>
<button @click="add">+</button>
</div>
</template>
<script>
const obj = {
counter: 0
}
Vue.component('cpn', {
template: '#MyCpn',
data() {
return obj
},
methods: {
add() {
this.counter++
},
res() {
this.counter--
}
}
})
let vm = new Vue({
el: '#app',
data: () => ({
title: "我是顶层Vue实例中的数据，外部组件能访问我的数据吗？"
})
})
</script>
</body> </html>
深入理解--VUE组件中数据的存放以及为什么组件中的data必需是函数的更多相关文章
- vue.js 父组件主动获取子组件的数据和方法、子组件主动获取父组件的数据和方法
父组件主动获取子组件的数据和方法 1.调用子组件的时候 定义一个ref <headerchild ref="headerChild"></headerchild& ...
- 面向UI编程：ui.js 1.1 使用观察者模式完成组件之间数据流转，彻底分离组件之间的耦合，完成组件的高内聚
开头想明确一些概念,因为有些概念不明确会导致很多问题,比如你写这个框架为什么不去解决啥啥啥的问题,哎,心累. 什么是框架? 百度的解释:框架(Framework)是整个或部分系统的可重用设计,表现为一 ...
- Django day26 HyperlinkedIdentityField，序列化组件的数据校验以及功能的（全局，局部）钩子函数，序列化组件的反序列化和保存
一:HyperlinkedIdentityField(用的很少):传三个参数:第一个路由名字,用来反向解析,第二个参数是要反向解析的参数值,第三个参数:有名分组的名字 -1 publish = ser ...
- java中数据的存放位置
引用自java编程思想四----2.2.1 程序运行时,我们最好对数据保存到什么地方做到心中有数.特别要注意的是内存的分配.有六个地方都可以保存数据:(1) 寄存器.这是最快的保存区域,因为它位于和其 ...
- 使用PL/SQL能查询oracle中数据，在for update 语句中一直卡住
原因:在oracle中,执行了update或者insert语句后,都会要求commit,如果不commit却强制关闭连接,oracle就会将这条提交的记录锁住.下次就不能执行增删操作. 解决:1.查询 ...
- vue 组件间数据传递
父组件向子组件传值 方法一: 子组件想要使用父组件的数据,需要通过子组件的 props 选项来获得父组件传过来的数据. 1.父组件parent.vue中代码: <template> < ...
- Vue系列（三）：组件及数据传递、路由、单文件组件、vue-cli脚手架
上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...
- 浅入深出Vue：子组件与数据传递
上一篇了解了组件的概念及在使用中需要注意的地方.在面对单个组件逻辑复杂需要拆分时,难免会遇到父子组件之间数据传递的问题.那么我们来了解一下在父子组件之间进行数据传递时需要遵循哪些约定,以及要注意哪些问 ...
- Vue父子组件数据双向绑定，子组件可修改props
第一种,子组件通过监听父组件数据,子组件改变数据之后通知给父组件 原文链接:https://blog.csdn.net/m0_37728716/article/details/81776929 父组件 ...
随机推荐
- python测试mysql写入性能完整实例
这篇文章主要介绍了python测试mysql写入性能完整实例,具有一定借鉴价值,需要的朋友可以参考下 本文主要研究的是python测试mysql写入性能,分享了一则完整代码,具体介绍如下. 测试环境: ...
- Linux—网络通讯管理命令
一.ping命令 . ping 主机名 . ping 域名 [root@localhost ~]# ping www.baidu.com . ping IP地址 [root@localhost ~]# ...
- 201871010116-祁英红《面向对象程序设计（java）》第6-7周学习总结
项目 内容 <面向对象程序设计(java)> https://home.cnblogs.com/u/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.c ...
- Pwn-pwn-200
题目地址 ttp://www.whalectf.xin/files/47a658e388a0c505fc07b6ee48a4a2e2/binary_200 32位,开启了NX和Canary保护 存在字 ...
- pwn-Stack Overflow
地址 https://cgctf.nuptsast.com/challenges#Pwn 先观察一下,是一个32位的程序,而且只开了NX保护 用IDA看看伪代码,重点在message和pwnme这两个 ...
- LG2444/BZOJ2938 「POI2000」病毒 AC自动机
问题描述 LG2444 BZOJ2938 I \(\mathrm{AC}\)自动机 \(\mathrm{AC}\)自动机是一种多模式串匹配算法,本萌新今天刚学了它qwq 约定在构造\(\mathrm{ ...
- CF-55 C.Pie or die
做法:先把四个角分别覆盖一条边,于是问题转化为判断离边最近的一个点是否离边的距离大于等于4 #include<iostream> #include<cstdio> #inclu ...
- 【CodeChef】August Challenge 2019 Div2 解题报告
点此进入比赛 \(T1\):Football(点此看题面) 大致题意: 求\(max(20a_i-10b_i,0)\). 送分题不解释. #include<bits/stdc++.h> # ...
- Exception "java.lang.ClassNotFoundException: com/intellij/codeInsight/editorActions/FoldingData"while constructing DataFlavor for: application/x-java-jvm-local-objectref; class=com.intellij.codeInsigh
java.lang.ClassNotFoundException in matlabR2014a 就是MATLAB和pycharm不能同时运行.关闭pycharm然后打开MATLAB就可以了.
- [LOJ 2134][UOJ 132][BZOJ 4200][NOI 2015]小园丁与老司机
[LOJ 2134][UOJ 132][BZOJ 4200][NOI 2015]小园丁与老司机 题意 给定平面上的 \(n\) 个整点 \((x_i,y_i)\), 一共有两个问题. 第一个问题是从原 ...