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>

 

posted @ 2018-11-27 09:59  熊削铁如泥-厚积薄发  阅读(588)  评论(0)    收藏  举报