### 1. 组件中的data 1. 组件可以有自己的data数据 2. 组件的data和实例的data有点不一样，实例中的data可以为一个对象，但是组件中的data必须是一个方法 3. 组件中的data除了必须为一个方法之外，这个方法内部，还必须返回一个对象才行 ``` Vue.component('mycom1', { template: '<h1>{{msg}}</h1>', data: function(){ return { msg: '这是组件中data定义的数据' } } }) ``` >为什么组件中的data必须是一个function？ 答：为了让组件多次使用时，data return出去之后互不影响 ### 2. 组件中的method demo：制作一个计数器组件 ``` --html-- <div id="app"> <counter></counter> </div> //定义一个template <template id="tmp"> <div> <input type="button" value="+1" @click="crease"> <h3>{{count}}</h3> </div> </template> ``` ``` --js-- Vue.component("counter", { template: '#tmp', data: function(){ return { count: 0 } }, methods: { crease(){ this.count++; } } }) var vm = new Vue({ el: '#app' }) ```