深入理解--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 父组件 ...
随机推荐
- 使用odbc从notes中导数据，配置odbc时报错
上次在配置odbc从notes中导数据时一直报错(忘记是什么错误了),后来,尝试着把notes和notesSQL的路径加入到path中就OK了!
- [MySQL] docker下安装使用mysql配置主从复制
拉取mysql的镜像docker search mysqldocker pull mysql 通过镜像创建容器,这里先创建第一个容器作为master mysql-v /etc/mysql:/etc/m ...
- axios+vue实现动态渲染员工数据+数据是对象
<style> table{ width: 600px; margin: 0 auto; text-align: center; border-collapse: collapse; /* ...
- str基本语法
基本数据类型(int,bool,str)1.基本数据数据类型: int 整数 str 字符串. 一般不存放大量的数据 bool 布尔值. 用来判断. True, False list 列表.用来存放大 ...
- 电商网站名词item-->SKU与SPU
一.总述: item sku spuitem 代表一种商品,是和店铺关联的.sku 商品的库存量单位 , 代表商品的规格和属性spu 产品单位最小分割的商品 ,与商家无关 它的属性会影响价格. 简单的 ...
- 利用java程序构造mysql测试数据
package com.baidu.mysql;import java.sql.*; public class MysqlJdbc { /** * @param args */ public stat ...
- 961.重复N次的元素
在大小为 2N 的数组 A 中有 N+1 个不同的元素,其中有一个元素重复了 N 次. 返回重复了 N 次的那个元素. 示例 1: 输入:[1,2,3,3]输出:3示例 2: 输入:[2,1,2,5, ...
- CME Futures & Options Order Book
http://algo-logic.com/futures-options-orderbook Algo-Logic Systems’ Futures & Options (F&O) ...
- MySQL学习笔记2——DML
DML(数据操作语言,它是对表记录的操作(增,删,改)!) 1.插入数据 *INSERT INTO 表名(列名1,列名2,...) VALUES(列值1,列值2,...); >在表名后给出要插入 ...
- SqlServer断开所有连接
有时候我们在使用SqlServer管理工具操作数据库的时候,需要对数据库进行改名,但是如果当前数据库还有连接未释放的话,是不能改名的. 有很多方式可以断开所有连接,这里介绍一种个人觉得比较简单的方式. ...