深入理解--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 父组件 ...
随机推荐
- DevOps 工程师成长日记系列四：打包
原文地址:https://medium.com/@devfire/how-to-become-a-devops-engineer-in-six-months-or-less-part-4-packag ...
- Linux中vim编辑命令
vim 功能 : 一个强大的文本编辑器 语法格式 :vim [ 选项 ] / 路径 / 文本文件名 命令格式: vi [ 选项 ] [ 文件名 ] +num 打开某个文件直接跳转到 num 行 ...
- 1. Vue - ES6
一.ES6部分知识点 1. 变量声明 <!-- var声明变量,导致变量提升 --> var name = 'ruanyifeng' function func(){ console.lo ...
- is ==的区别 编码和解码
1.n=0 n1=0 print(n==n1) ==>true == 是比较两边的值 2.a="alex " b="alex" print(a==b)= ...
- VLAN实验（5）三层交换
1.选择1台S5700和3台pc机,并根据实验编址完成此拓扑图. 2.检查连通性 (1)因为mengyu-PC1和mengyu-PC2在一个地址段上,可以ping通 (2)因为mengyu-PC1和m ...
- cidr地址段
CIDR采用各种长度的"网络前缀"来代替分类地址中的网络号和子网号,其格式为:IP地址 = {<网络前缀>,<主机号>}.为了区分网络前缀,通常采用&quo ...
- 浏览器onbeforeunload
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 设计模式-单例模式(Singleton) （创建型模式）
//以下代码来源: 设计模式精解-GoF 23种设计模式解析附C++实现源码 //Singleton.h #pragma once #include<iostream> class Sin ...
- xargs 用法理解
原来一直不理解,linux shell下 xargs和 管道的区别: 1.管道在linux shell用得比较广泛,管道常常用来组合两个及以上的命令,共同完成一个功能: 比如:我们要统计某一个文件有多 ...
- django 报错Reverse for 'detail' with keyword arguments '{'pk': '2'}' not found. 1 pattern(s) tried: ['$post/(?P<pk>[0-9]+)/$']
Django报错:Reverse for 'detail' with keyword arguments '{'pk': '2'}' not found. 1 pattern(s) tried: [' ...