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中include引用导致不能再次相对引用文件的一个小问题
    ECharts饼图试玩
    不该迷茫的时候迷茫
    [5]火车票接口整理
    [4]xlongwei工具类
    [3]天行新闻
    [2]新闻
  • 原文地址:https://www.cnblogs.com/wuhefeng/p/10024684.html
Copyright © 2011-2022 走看看