### 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' }) ```