1. 創建方式
//方式1
var myComponent = Vue.extend({
template:'<span>{{flagN}}</span>'
})
Vue.component('hello',myComponent)
//方式2
Vue.component('hello',{
template:'<span>{{flagN}}</span>'
})
<hello></hello>
2. 局部創建
```
components: {
'my-add': {
template: '#myadd',
data() {
return {
add: 'add132'
}
}
}
}
<template id='myadd'>
<div>
<h2>{{add}}</h2>
</div>
</template>
<my-add></my-add>
```
3. 內容分發
```
<template>
<div>
<slot name='s1'></slot>
</div>
</template>
<ul slot='s1'>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
```
4. 動態添加組件
```
<button @click="flag='s1'">顯示s1</button>
<button @click="flag='s2'">顯示s2</button>
keep-alive 緩存非活動組件
<component :is="flag"></component>
```
5. 組件傳值
父傳子：父-->中間變量-->中間變量給子
子傳父：子-->發送方法，將值發送給父-->父調用接收方法，接受并改變數據
