<div style="color: green;">
[Components Basics](https://vuejs.org/v2/guide/components.html)
___
## 一、复用性
> component 只是多了个名字可复用的 vm instance 罢了
component 的很多属性都可以复用，除了<span style="color: red; font-size: 22px;"> el </span>这样的 root-specific
----
## 二、特殊的地方
1. data 必须是 function
> 这样可以实现 data 复用，让每一个引用都有一个独立的 data 值
>
> data: function () {
> return {
> age: 20
> }
> }
---
<br>
## 三、component
可以分为 local 和 global 两种
> <span style="font-weight: bold; color: black;">global
>
> Vue component() --- 注册
>
> new Vue() --- 使用
___
## 四、props -- passing data to child components
例子
<div id="componentId2">
<my-component v-for="item in posts" :key="item.id" :title="item.title"></my-component>
</div>
// 注意是使用 bind 来实现数据的绑定
<script>
Vue.component("my-component", {
props: ['title'],
template: '<div>{{ title }}</div>'
})
new Vue({
el: '#componentId2',
data: {
posts: [
{id: 1, title: 'kdljfklajldkfjadsl'},
{id: 2, title: 'sdkafnm'},
{id: 3, title: 'kjlk'}
]
}
})
</script>
---
## 五、A Single Root Element
> template 只能有一个 root element
>
> 既无论要写多少 html 代码，都只能放在一个 root element 下面
>
> 不然就只显示第一个 element
---
## 六、$emit
###### ？不懂什么鬼
> 。。。未完待续
#### 2018-09-07
> $emit : 发射方法到父组件，同时可以传递值过去
> 传递的值通过 $event 获取，相当于 $event 是 value 的 key
// vue
Vue.component('use-emit', {
template:
'<div>' +
'<button v-on:click="$emit(\'clickFun\', emit-value)">click</button>' +
'<div>'
});
//html
<use-emit v-on:clickFun="someFun($event)"></use-emit> // ?