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. 组件传值
父传子：父-->中间变量-->中间变量给子
子传父：子-->发送方法，将值发送给父-->父调用接收方法，接受并改变数据
