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>