所有的vue组件都是以.vue格式结尾的文件。可以说，一个vue文件就是一个类。

我们看到的vue-cli中的App.vue文件就是整个vue的根组件。

 1 <template>
 2   <div id="app">
 3    {{a}}
 4   </div>
 5 </template>
 6 <script>
 7 export default {
 8 }
 9 </script>
10 <style>
11 </style>

在我们之前写data时候是一个对象，但是此时会报错

 1 <template>
 2   <div id="app">
 3    {{a}}
 4   </div>
 5 </template>
 6 <script>
 7 export default {
 8  data:{
 9    a:100
10  }
11 }
12 </script>
13 <style>
14 </style>

 

 

 

此时我们的data需要这样写才不会报错

1 data(){
2    return{
3      a:100
4    }
5  }

注意：是data必须是一个函数，最外层必须有默认暴露

如果在我们组件中data必须是一个函数，是因为防止数据之间冲突

data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的

 

为什么vue的data必须是一个函数，我们从JavaScript的面向对象开始

我们看下面的一个案例

 1  <script>
 2         var obj = {
 3             data:{
 4                 name: '小明'
 5             }
 6         }
 7         var People = function(obj) {
 8             this.data = obj.data
 9         }
10     
11         var xiaoming = new People(obj)
12         var xiaohong = new People(obj)
13         xiaohong.data.name = '小红'   
14         console.log(xiaoming.data.name)
15         console.log(xiaohong.data.name)
16     </script>

 

 

 

此时我们看浏览器，当我们修改了其中的一个名字之后，此时浏览器会输出两个小红，这就意味着整个实例的data都被篡改了，也就是说，他改的是整个地址。

我们知道复杂数据类型指的都是同一个地址，所以，当xiaohong.data.name修改的时候，xiaoming.data.name也就随之修改了

解决办法就是obj对象返回一个data函数，这个函数return一个对象

     var obj = {
            data(){
                return {
                    name:"小明"
                }
            }
        }
        var People = function(obj) {
            this.data = obj.data()
        }

此时看浏览器输出结果

 

 

 

此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因，

 

 

自定义组件

如何使用自定义组件？

第一步创建自己的组件

比如在components文件夹中创建一个study.vue文件

App.vue文件

 1 <template>
 2   <div>
 3     <study></study>
 4   </div>
 5 </template>
 6 
 7 <script>
 8 // 引入组件
 9 import study from './components/study.vue'
10 
11 export default {
12   // 注册组件
13   components:{
14     study
15   },
16   data(){
17    
18   }
19 }
20 </script>

 

使用组件三步走：

1)   创建vue文件

2)   在要渲染的地方引入该组件

3)   注册该组件

 

<study></study>组件内容

 1 <template>
 2   <div id="app">
 3   <h1>{{a}}</h1>
 4   <button @click="add">加一</button>
 5   </div>
 6 </template>
 7 
 8 <script>
 9 export default {
10   data(){
11     return {
12       a:100
13     }
14   },
15   methods:{
16     add(){
17       this.a++
18     }
19   }
20 }
21 </script>
22 <style >
23 </style>

App.vue文件内容

 1 <template>
 2   <div id="app">
 3   <study></study>
 4   </div>
 5 </template>
 6 <script>
 7 import study from "./components/study.vue"
 8 
 9 export default {
10   components:{
11     study
12   },
13  data(){
14    return{
15      a:100
16    }
17  }
18 }
19 </script>
20 <style>
21 </style>

 

 

组件是可以复用的，并且数据是隔离的

在给App.vue多添加几个study.vue文件

1 <template>
2   <div id="app">
3   <study></study>
4   <study></study>
5   <study></study>
6   <study></study>
7   </div>
8 </template>