[TOC]
# 组件
## 组件的定义
> 组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。
## 组件的本质
> 在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。在 Vue 中注册组件很简单：
```
// 定义名为 todo-item 的新组件
注册组件
Vue.component('todo-item', {
template: '<li>这是个待办项</li>'
})
```
## 组件的调用
### 全局组件
```
//定义名为 qq 的新组件
,注册组件
Vue.component('qq',{
template:'<button @click="on_click">这是个模板的内容</button>',
//模板里定义的方法
methods:{
on_click(){
alert("你好")
}
}
})
new Vue({
//在实例的挂载目标
el:"#app",
})
```
```
// app为Vue的实例挂载点,为Vue实例提供域
<div id="app">
<qq></qq>
</div>
```
### 局部组件
> 组件有时候只能在局部使用 上面的Vue可以在全局使用
> 见组件定义在局部只能局部调用
```
new Vue({
el:"#app",
components:{
//qq是调用的组件
qq:{
template:'<button @click="on_click">这是个模板的内容</button>',
methods:{
on_click(){
alert("你好")
}
}
}
}
})
```
## 配置组件
### `data` 必须是一个函数
> 当我们定义这个 <button-counter> 组件时，你可能会发现它的 data 并不是像这样直接提供一个对象：
```
data: {
count: 0
}
```
### `template` 的放置
> 当模板里的类容变多 template的放置
###1.放在template里用 ``
> 放在``里可以随意换行 没放在``不可以换行
```
template: `
<button @click="toggle_like" :class="{{liked: liked}}'">
{{like_count}}
</button>
`
```
### 2.放在html里面
```
<template id="like-component">
<button @click="toggle_like" :class="liked?'one':'two'">{{like_count}}</button>
</template>
//用挂载实例接
template: '#like-component',
```
