所有的vue組件都是以.vue格式結尾的文件 我們看到的vue-cli中的App.vue文件就是整個vue的根組件 ``` <template> <div> </div> </template> <script> export default { data(){ } } </script> <style> ``` ## Mashibng.vue文件里  ## App.vue文件里  ## ## 一個vue文件就是一個類 ## ## 需要注意的地方是data必須是一個函數 ## 最外層必須有默認暴露 ``` <script> export default { data(){ return { } } } </script> ``` ## 我們后面寫的所有的vue的對象清單都必須在export default里面去羅列 ## 在我們之前寫data時候是一個對象 ``` var app = new Vue{ data: { name:'小明' } } ``` ## 我們發現data是一個對象 ## 如果在我們組件中data必須是一個函數，是因為防止數據之間沖突 ``` <script> export default { data(){ return { a: '小明' } } } </script> ``` ## ## data是一個函數，返回的是一個對象，目的是為了讓每個組件數據隔離，這個是JavaScript的原理，并不是vue去設計的 為什么vue的data必須是一個函數 我們從JavaScript的面向對象開始  我們知道復雜數據類型指的都是同一個地址，所以，當xiaohong.data.name修改的時候，xiaoming.data.name也就隨之修改了 解決辦法就是config對象返回一個data函數，這個函數return一個對象 ``` var config = { data(){ return { name: '小明' } } } var People = function(config) { this.data = config.data() } ``` 此時People的data返回的是一個對象，不是一個地址，每一個實例拿到的都是個獨立，個體的對象，互相不會數據沖突，這個就是vue組件data為什么是函數的原因  # 如何使用自定義組件？ 第一步創建自己的組件 比如在components文件夾中創建一個Mashibing.vue文件 ## App.vue文件 ``` <template> <div> <Mashibing></Mashibing> </div> </template> <script> // 引入組件 import Mashibing from './components/Mashibing.vue' export default { // 注冊組件 components:{ Mashibing }, data(){ } } </script> ``` ## 總結使用組件三步走 1.創建vue文件 2.在要渲染的地方引入該組件 3.注冊該組件  ``` <Mashibing></Mashibing>組件內容 ``` ``` <template> <div> <h1>馬士兵教育{{a}}</h1> <button @click="add">按我加1</button> </div> </template> <script> export default { data() { return { a: 100 } }, methods:{ add() { this.a ++ } } } </script> <style> </style> ```  ## ## 組件是可以復用的，并且數據是隔離的 ## 在給App.vue多添加幾個Mashibing.vue文件 ``` <template> <div> <Mashibing></Mashibing> <Mashibing></Mashibing> <Mashibing></Mashibing> </div> </template> ```