# 插槽使用
## 了解
> 在子组件中，使用特殊的元素`<slot>`就可以为子组件开启一个插槽。
> 该插槽插入什么内容取决于父组件如何使用。
```
<div id="app">
<my-com>你好</my-com>
</div>
<template id="myCom">
<div>
<slot></slot>
</div>
</template>
<script src="js/vue.js"></script>
<script>
Vue.component('my-com',{
template:'#myCom'
})
var vm = new Vue({
el:'#app'
})
</script>
```
:-: 
## 插槽默认值
> 如果父组件没有对子组件的插槽传递内容，那么插槽可不可以显示默认值呢？
> 如果传值，则显示传递的内容
```
<div id="app">
<my-com></my-com>
<my-com>你好</my-com>
<my-com>
<h2>插槽</h2>
<p>果然好用</p>
</my-com>
</div>
<template id="myCom">
<div>
<slot>我是默认值</slot>
</div>
</template>
<script src="js/vue.js"></script>
<script>
Vue.component('my-com',{
template:'#myCom'
})
var vm = new Vue({
el:'#app'
})
</script>
```
:-: 
