所有的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> ```