组件本身的数据存放在哪里呢app
并且这个函数要返回一个对象,对象内部保存着数据函数
<div id="app"> <mycpn></mycpn> </div> <script> Vue.component('mycpn', { template: '<div>{{message}}</div>', data: function() { return { message: '组件内容' } } }); var app = new Vue({ el: '#app' }) </script>
JavaScript对象是引用关系,因此若是return出的对象引用了外部的一个对象,那这个对象就是共享的的,任何一方修改都会同步。好比code
<div id="app"> <mycpn></mycpn> <mycpn></mycpn> <mycpn></mycpn> </div> <script> var data = { counter: 0 }; Vue.component('mycpn', { template: '<button @click="counter++">{{counter}} </button>', data: function() { return data; } }); var app = new Vue({ el: '#app' }) </script>
组件使用了三次。可是点击任意一个<button>,三个的数字都会加1,那是由于组件的data引用的是外部的对象,这确定不是咱们指望的效果,因此给组件返回一个新的data对象来独立component
<div id="app"> <mycpn></mycpn> <mycpn></mycpn> <mycpn></mycpn> </div> <script> var data = { counter: 0 }; Vue.component('mycpn', { template: '<button @click="counter++">{{counter}}</button>', data: function() { return { counter: 0 //返回新值,不会相互影响 } } }); var app = new Vue({ el: '#app' }) </script>
使用函数返回新值,组件不会相互影响,不会引发连锁反应。对象