1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.      <script src="../../vue.js"></script>
  7.  </head>
  8.  <body>
  9.  <!--
  10.  
  11.  为什么在Vue.component({})中使用data必须是函数？
  12.  在JS中，产生一个对象是通过构造函数来产生的
  13.  并且通过构造函数产生的对象都是新的对象
  14.  在实例化组件中，data每次调用组件都是产生一个新的组件
  15.  Vue.component('vue-div',{
  16.      template:'#vue-div',
  17.      data(){
  18.          return{  //这里每次调用组件都会产生一个新的组件
  19.              message:'西门吹雪'
  20.          }
  21.      }
  22.  })
  23.  -->
  24.  <div id="app">
  25.      <!--添加多个，每个都是独立的，不受其它影响-->
  26.      <!--验证counter没有被共享-->
  27.      <!--所以data()必须以一个函数的形式返回出来-->
  28.      <my-btn></my-btn>
  29.      <my-btn></my-btn>
  30.      <my-btn></my-btn>
  31.      <my-btn></my-btn>
  32.  </div>
  33.  <!-- .注册一个组件-->
  34.  <template id="my_btn">
  35.      <button @click="counter += 1">点击的次数{{counter}}</button>
  36.  </template>
  37.  
  38.  </body>
  39.  <script>
  40.      //如果data是一个对象，那么所有的将会被共享，
  41.      // 无论产生多少个组件，都是对应一样的值
  42.      //这就是data必须是函数的原因
  43.      // let data = {
  44.      //     counter:0
  45.      // };
  46.      // data(){
  47.      //     return data;
  48.      // }
  49.  
  50.      //2.实例化组件
  51.      Vue.component('my-btn',{
  52.          template:'#my_btn',
  53.          data(){
  54.               return{
  55.                   counter:  //通过组件构造器产生出来的组件都是单独的，里面的这个counter不能共享，因为都是通过data函数来一个一个产生的，
  56.               }
  57.          }
  58.      })
  59.  
  60.      var vm = new Vue({
  61.          el:'#app',
  62.          data:{}
  63.      })
  64.  </script>
  65.  </html>

vue-为什么子组件中的data选项必须是函数？的更多相关文章

  1. Vue系列之 => 组件中的data和methods

    使用data <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  2. vue 父组件使用子组件中的data或methods

    1.调用子组件的时候 定义一个ref 2.在父组件里面通过 this.$refs.verify.属性 this.$refs.verify.方法

  3. Vue父组件向子组件传值以及data和props的区别

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/xukongjing1/article/ ...

  4. VUe.js 父组件向子组件中传值及方法

    父组件向子组件中传值 1.  Vue实例可以看做是大的组件,那么在其内部定义的私有组件与这个实例之间就出现了父子组件的对应关系. 2. 父子组件在默认的情况下,子组件是无妨访问到父组件中的数据的,所以 ...

  5. 第六章 组件 63 组件传值-父组件向子组件传值和data与props的区别

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

  6. Vue之vue中的data为什么是一个函数+vue中路径别名alias设置

    问题描述 为什么在vue组件中,我们的data属性必须是一个函数,new Vue()中的data除外,因为new Vue中只有一个data属性. 原因 因为我们能抽离出来的组件,肯定是具有复用性的,它 ...

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

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

  8. vue.js 1中父组件跳到子组件中并传参让子组件显示不同的内容

    父组件中的点击跳转: <ul class="insurance-entry clearfloat"> <li v-link="{name:'produc ...

  9. vue 中 echart 在子组件中只显示一次的问题

    问题描述 一次项目开发过程中,需要做一些图表,用的是百度开源的 echarts. vue推荐组件化开发,所以就把每个图表封装成子组件,然后在需要用到该图表的父组件中直接使用. 实际开发中,数据肯定都是 ...

随机推荐

  1. Eclipse导入的Maven项目没有Build Path

    我导入的是 Signal-Server项目到 Eclipse中,发现 src 文件夹上面没有#号,包视图和语法提示都没有 ~~ 解决方法: 修改 Project Facets 在 项目右键 -> ...

  2. redis - 环境搭建(转)

      一:简介(来自百科) redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合)和zse ...

  3. cmake README.TXT

    { cmake .//在当前路径下构建项目 cmake --build .//在当前路径下生成项目(默认为debug)//cmake --build . --config release//在当前路径 ...

  4. Unity Download

    { https://unity.cn/releases }

  5. Ecshop商品浏览历史样式修改方法

    想要修改ECSHOP的浏览历史样式,发现 history.lbi 中不能修改. 需要修改的文件:includes\lib_insert.php,找到函数:function insert_history ...

  6. 出现Warning: date(): It is not safe to rely on the system's timezone settings的解决办法

    在没有配置,尤其是新安装的PHP中使用date函数时,会报这个错误: Warning: date(): It is not safe to rely on the system's timezone ...

  7. ThinkPHP学习（二）理清ThinkPHP的目录结构及访问规则，创建第一个控制器

    ThinkPHP的目录结构 回顾上一篇的安装目录: 目录对应关系 F:\\PHP├─index.php       入口文件├─README.md       README文件├─Applicatio ...

  8. Vue中时间的设置

    设置默认属性ct_month: null 方法: //默认显示今天getdatatime(){ this.ct_month= new Date(); }, //默认显示昨天getdatatime(){ ...

  9. 19、javascript基础知识

    1.几天接到了一个奇葩的需求,就是在鼠标滚轮滑动的时候,div要悬浮不动,因此这引起了我对于javascript知识的复习 首先从最基础的变量的类型开始 <!DOCTYPE html> & ...

  10. Invoking destroy method 'close' on bean with name 'dataSource'

    Invoking destroy method 'close' on bean with name 'dataSource' Spring与Mybatis整合时出现的问题,找了一晚上结果是一个属性写错 ...