验证data选项必须是函数
函数时，数据没有共享，互相独立
<div id="app"> <my-btn></my-btn> <my-btn></my-btn> <my-btn></my-btn> <my-btn></my-btn> </div> <template id="my_btn"> <button @click="counter += 1">点击次数：{{counter}}</button> </template> <script src="js/vue.js"></script> <script> // 1.实例化组件 Vue.component('my-btn', { template: '#my_btn', data() { return { counter: 0 } } }); new Vue({ el: '#app', }); </script>对象时，数据之间共享，不独立
<div id="app"> <my-btn></my-btn> <my-btn></my-btn> <my-btn></my-btn> <my-btn></my-btn> </div> <template id="my_btn"> <button @click="counter += 1">点击次数：{{counter}}</button> </template> <script src="js/vue.js"></script> <script> let data = { counter: 0 } // 1.实例化组件 Vue.component('my-btn', { template: '#my_btn', data() { return data; } }); new Vue({ el: '#app', }); </script>
