1.     <body>
  2.         <div id="app">
  3.             <counter></counter>
  4.         </div>
  5.         <template id="temp1">
  6.             <div>
  7.                 <input type="button" value="+1" @click="increment">
  8.                 <h3>{{count}}</h3>
  9.             </div>
  10.         </template>
  11.         <script type="text/javascript">
  12.             var dataObj = {count: 0};
  13.             Vue.component('counter',{
  14.                 template:'#temp1',
  15.                 data(){
  16.                     return dataObj
  17.                 },
  18.                 methods:{
  19.                     increment() {
  20.                         this.count++
  21.                     }
  22.                 }
  23.             })
  24.             var vm = new Vue({
  25.                 el: "#app",
  26.                 data:{},
  27.                 methods: {}
  28.             })
  29.         </script>
  30.     </body>

分析如上代码：

1、首先创建一个名字为counter的组件，data函数中返回一个外部定义的对象的值，如果直接给data属性设置一个对象而不是函数，那么会在浏览器中直接报错

2、在浏览器中运行代码

每次点击+1按钮，下边的值就会加一

3、如果我们在页面上同时使用三个counter组件

  1. <div id="app">
  2.     <counter></counter>
  3.     <hr>
  4.     <counter></counter>
  5.     <hr>
  6.     <counter></counter>
  7.     <hr>
  8.  </div>

然后在浏览器中再次浏览

点击任意一个+1按钮，三个数同时变化。因为它们都指向了同一个对象。我们当然希望点击不同的按钮只实现当前组件内数据的变化，那么，我们在函数中返回一个对象，每次创建一个组建的时候，在内存中同时开辟一块空间给当前组件存放data，这样，就不会出现共用一个data的现象。我们只需将如上代码进行一点更改

  1. data: function (){
  2.     //return dataObj
  3.     return{
  4.         count：0
  5.     }
  6. },

vue组件中data为什么必须是个函数的更多相关文章

  1. vue组件中data为什么必须是一个函数？

    因为JavaScript的特性所导致,在component中,data必须以函数的形式存在,不可以是对象. 组建中的data写成一个函数,数据以函数返回值的形式定义,这样每次复用组件的时候,都会返回一 ...

  2. Vue 组件中 data 为什么必须是函数

    原文地址 vue组件中的data必须是函数 类比引用数据类型 Object是引用数据类型,如果不用function 返回,每个组件的data 都是内存的同一个地址,一个数据改变了其他也改变了; jav ...

  3. 怎样理解 Vue 组件中 data 必须为函数 ?

    组件意在 复用 , 若为 对象, 则会相互干扰. 且 Vue 不允许此事发生, 规定必须为函数, 否则报错. 原理如下 对象 // 模拟创建组件 var Component= function() { ...

  4. vue组件中data是个函数

    当我们const vm = new Vue({ el : '#app',   data : { msg:‘hello World’ } })用习惯了,data是一个对象,可到了vue组件 Vue.co ...

  5. Vue组件里面data为什么必须是个函数

    在创建或注册模板的时候,传入一个data属性用来绑定数据,但是在组件中,data必须是一个函数,而不能直接把对象赋值给它. export default { name:'app', data(){ r ...

  6. 039——VUE中组件之子组件中data使用实例与text-xtemplate的使用方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 15.Vue组件中的data

    1.组件中展示数据和响应事件: // 1. 组件可以有自己的 data 数据 // 2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象 // 3. 但是组件中 ...

  8. vue组件中的data为什么是函数？

    一.vue组件中的data为什么是函数 为了保证组件的独立性 和 可 复用性,data 是一个函数,组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,你实例化几次, ...

  9. Vue组件中引入jQuery

    一.安装jQuery依赖 在使用jQuery之前,我们首先要通过以下命令来安装jQuery依赖: npm install jquery --save # 如果你更换了淘宝镜像,可以使用cnpm来安装, ...

随机推荐

  1. CentOS 6忘记root密码的解决办法

    1.在开机启动的时候按键盘上的“E”键 或者“ESC”键,会进入如下界面 2.选择相应的内核,再次按“E”,出现下图,选择第二项,再次按“E”键 3.经过第二步,这个画面可以编辑,在信息的最后加“空格 ...

  2. objective-c高级编程 笔记

    引用计数:通过给对象计数标志,来判断是否释放对象 注:只能释放自己持有的对象 id obj = [NSMutableArray array] 如obj这个对象,并不是你所持有的对象,所以你无法进行释放 ...

  3. docker容器安装vi （一般容器都是Debian GNU/Linux 9）

    在使用docker容器时,同时你docker里的系统正好是debian或ubuntu的时候,有时候里边没有安装vim,敲vim命令时提示说:vim: command not found,这个时候就需要 ...

  4. SQL LAST() 函数

    LAST() 函数 LAST() 函数返回指定的字段中最后一个记录的值. 提示:可使用 ORDER BY 语句对记录进行排序. SQL LAST() 语法 SELECT LAST(column_nam ...

  5. SQL MIN() 函数

    MIN() 函数 MIN 函数返回一列中的最小值.NULL 值不包括在计算中. SQL MIN() 语法 SELECT MIN(column_name) FROM table_name 注释:MIN ...

  6. Fum uc M-R ko P's R

    Milr-Rabin Dodod Avlo se \(n-1\) e \(u\cdot 2^t\). hen goch'n Toizz lme \([1,n-1]\) e \(l\). cak fe ...

  7. c++ 重点随记

    1.在公有继承中:(1).派生类对象储存了基类的私有成员 (2).派生类对象可以使用基类的方法 (3).基类引用可以引用派生类对象,派生类引用不可以引用基类对象 2.基类引用引用派生类对象时:若基类引 ...

  8. FLOAT 和 DOUBLE区别

    以下是 FLOAT 和 DOUBLE 的区别: float : 单精度浮点数 double : 双精度浮点数 ·浮点数以 8 位精度存储在 FLOAT 中,并且有四个字节. ·浮点数存储在 DOUBL ...

  9. 原生js，从面向过程的方法到面向对象的方法，写个选项卡练练手

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. filebeat-6.4.3-windows-x86_64输出Kafka

    配置filebeat.yml文件 filebeat.prospectors: - type: log encoding: utf- enabled: true paths: - e:\log.log ...