深入理解--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 父组件 ...
随机推荐
- [20190523]修改参数后一些细节注意2.txt
[20190523]修改参数后一些细节注意2.txt --//上午想模拟链接遇到的情况,链接http://blog.itpub.net/267265/viewspace-2645262/--//就是修 ...
- RAW数据格式解析
RAM数据格式解析 Raw格式是sensor的输出格式,是未经处理过的数据,表示sensor接受 到的各种光的强度. Raw数据在输出的时候是有一定的顺序的,一般为以下四种: 00: GR/BG 01 ...
- Ubuntu16.04初始配置
Ubuntu16.04初始化 清理系统 删除libreoffice:sudo apt-get remove libreoffice-common 删除Amazon链接:sudo apt-get rem ...
- [RN] React Native 调试技巧
React Native 调试技巧 一. 安卓模拟器调出Dev Setting 命令 adb shell input keyevent 二.图片不出来时,先运行此命令,再重新 run react-na ...
- 【2019.8.6 慈溪模拟赛 T2】树上路径（tree）（Trie）
从暴力考虑转化题意 考虑最暴力的做法,我们枚举路径的两端,然后采用类似求树上路径长度的做法,计算两点到根的贡献,然后除去\(LCA\)到根的贡献两次. 即,设\(v_i\)为\(i\)到根路径上的边权 ...
- js --自动播放音频
简介 基本使用 chrome下无法自动播放问题处理 简介 音频的播放使用audio进行操作,可以有两种方式处理(纯js和html标签+js). audio是html5的新标签,用于定义声音 audio ...
- 【Java并发专题之三】Java线程互斥、协作原理
(I)Java线程互斥原理之synchronized原理 从JDK5引入CAS原子操作,但没有对synchronized关键字做优化,而是增加了J.U.C.concurrent,concurrent包 ...
- resharper 8.2
用户名:ronle注册码:ZoJzmeVBoAv9Sskw76emgksMMFiLn4NM
- CSS3 滤镜Filter亮度动画
CSS3 滤镜Filter亮度动画 -webkit-filter:brightness 值越高 亮度越亮<pre><!DOCTYPE html><html lang=&q ...
- CodeForce 192D Demonstration
In the capital city of Berland, Bertown, demonstrations are against the recent election of the King ...