# 插槽使用
## 了解
> 在子組件中，使用特殊的元素`<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>
```
:-: 
