zoukankan      html  css  js  c++  java
  • vue-为什么子组件中的data选项必须是函数?

     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 <!-- 1.注册一个组件-->
    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:0  //通过组件构造器产生出来的组件都是单独的,里面的这个counter不能共享,因为都是通过data函数来一个一个产生的,
    56              }
    57         }
    58     })
    59 
    60 
    61     var vm = new Vue({
    62         el:'#app',
    63         data:{}
    64     })
    65 </script>
    66 </html>
  • 相关阅读:
    学习笔记-php图像等比例剪裁-2016.4.7
    学习日记-2016.3.31
    学习日记--2016.3.30
    I/O扩展篇(基于74HC164/74HC165)
    Visual SVN Server启动失败0x8007042a错误
    CC3000 主机驱动API介绍
    CC3000 SPI接口编程介绍
    struct和typedef struct彻底明白了
    MSP430学习笔记:UART
    DWORD类型的IP地址转换为CString字符串
  • 原文地址:https://www.cnblogs.com/wuhefeng/p/10024684.html
Copyright © 2011-2022 走看看