[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',
```
