# 组件

组件是带有一个名字的可复用的vue实例，可以在new Vue创建的vue根实例中把定义的组件当做自定义元素来使用

### 组件构成

组件和new Vue接收的选项相同，都包括如下部分

- data

- methods

- computed

- watch 

- components   组件内可以调用其他组件

  > el 是根实例特有的选项，组建中不能出现el选项



### 组件定义和使用：

#### 定义一个组件

需要把组件实例赋给一个变量

```
 let counter=Vue.component('counter', {
            data: function () {
                return {
                    count: 0
                }
            },
            methods:{
                add(){
                    this.count+=1
                }
            },
            template: '<button v-on:click="add">You clicked me {{ count }} times.</button>'
        })
```

> 声明组件中，组件内部的data必须是一个函数
>
> 因此 ，每个组件实例都是彼此独立的 

使用它：

js部分：

```
 var app = new Vue({
            el: '#app',
            data: {
                selected: []
            },
            component:{
                counter
            }


        })
```

template (html)部分

```
<div id="app">
	<counter></counter>
	<counter></counter>
	<counter></counter>
	<counter></counter>
	
</div>
```

> 组件可以使用任意次数
>
> 这个例子中，id=app的部分叫做 父组件    counter指代的部分叫做 子组件