<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <script src="../../vue.js"></script>

 </head>

 <body>

 <!--

 为什么在Vue.component({})中使用data必须是函数？

 在JS中，产生一个对象是通过构造函数来产生的

 并且通过构造函数产生的对象都是新的对象

 在实例化组件中，data每次调用组件都是产生一个新的组件

 Vue.component('vue-div',{

     template:'#vue-div',

     data(){

         return{  //这里每次调用组件都会产生一个新的组件

             message:'西门吹雪'

         }

     }

 })

 -->

 <div id="app">

     <!--添加多个，每个都是独立的，不受其它影响-->

     <!--验证counter没有被共享-->

     <!--所以data()必须以一个函数的形式返回出来-->

     <my-btn></my-btn>

     <my-btn></my-btn>

     <my-btn></my-btn>

     <my-btn></my-btn>

 </div>

 <!-- .注册一个组件-->

 <template id="my_btn">

     <button @click="counter += 1">点击的次数{{counter}}</button>

 </template>

 </body>

 <script>

     //如果data是一个对象，那么所有的将会被共享，

     // 无论产生多少个组件，都是对应一样的值

     //这就是data必须是函数的原因

     // let data = {

     //     counter:0

     // };

     // data(){

     //     return data;

     // }

     //2.实例化组件

     Vue.component('my-btn',{

         template:'#my_btn',

         data(){

              return{

                  counter:  //通过组件构造器产生出来的组件都是单独的，里面的这个counter不能共享，因为都是通过data函数来一个一个产生的，

              }

         }

     })

     var vm = new Vue({

         el:'#app',

         data:{}

     })

 </script>

 </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. 有穷自动机（NFA、DFA）&正规文法&正规式之间的相互转化构造方法

    在编译原理(第三版清华大学出版社出版)中第三章的词法分析中,3.4.3.5.3.6小节中分别讲解了 1.什么是NFA(不确定的有穷自动机)和DFA(确定的有穷自动机) 2.如何将  不确定的有穷自动机 ...

  2. ssh-key添加之后依旧需要密码输入Bug的解决

    场景重现 要求从10.183.93.181的root用户ssh免密登录至10.110.155.26的boss用户 1.在10.110.155.26 的boss用户下面新建目录.ssh 2.在10.11 ...

  3. PowerPoint for Mac 中的键盘快捷方式汇总

    PowerPoint for Mac 中的键盘快捷方式介绍给大家,使用PowerPoint for Mac可以创建新颖别致的演示文稿通过漂亮的设计.丰富的动画.电影动作.3D 模型和图标传达你的想法. ...

  4. CSS制作红桃心

    这里主要用到了before与after属性之前之后 代码: <!DOCTYPE html> <html> <head> <meta charset=" ...

  5. CentOS7简单安装mplayer和vlc！

    http://pkgs.org/在这个网上搜索下面的包的最新版1. sudo rpm -ivh epel-release-7-0.2.noarch.rpm 2. sudo rpm -Uvh elrep ...

  6. 杂项-.Net-HQL：HQL

    ylbtech-杂项-.Net-HQL:HQL HQL是Hibernate Query Language的缩写,提供更加丰富灵活.更为强大的查询能力:HQL更接近SQL语句查询语法. 1.返回顶部 1 ...

  7. 戏说 .NET GDI+系列学习教程(三、Graphics类的应用_验证码)

    关于Graphics也有了基本了解下面想说的的是学这个东东干什么呢,到底如何应用目前常见应用1.验证码(参照网上的)2.打印排版(会提到关于条形码大小设置)3.自定义控件 一.验证码 class Va ...

  8. 3.1 开始使用 redux

    前面我们介绍了 flux 架构以及其开源实现 redux,在这一节中,我们将完整的介绍 redux: redux 介绍 redux 是什么 redux 概念 redux 三原则 redux Store ...

  9. 2019河北省大学生程序设计竞赛（重现赛）J-舔狗 （拓扑排序）

    题目链接:https://ac.nowcoder.com/acm/contest/903/J 题意:给你 n 个舔狗和他喜欢的人,让你俩俩配对(只能和喜欢它的和它喜欢的),求剩下的单身狗数量. 思路: ...

  10. JUC源码分析-集合篇（四）CopyOnWriteArrayList

    JUC源码分析-集合篇(四)CopyOnWriteArrayList Copy-On-Write 简称 COW,是一种用于程序设计中的优化策略.其基本思路是,从一开始大家都在共享同一个内容,当某个人想 ...