# 具名插槽slot
## 當子組件的功能復雜時，子組件的插槽可能并非是一個。
比如我們封裝一個導航欄的子組件，可能就需要三個插槽，分別代表左邊、中間、右邊。
那么，外面在給插槽插入內容時，如何區分插入的是哪一個呢？
這個時候，我們就需要給插槽起一個名字
## 如何使用具名插槽呢？
非常簡單，只要給slot元素一個name屬性即可
## 案例
```
<div id="app">
<my-com></my-com>
<hr>
<my-com>
<span slot="center">叩丁狼</span>
</my-com>
<hr>
<my-com>
<span slot="left">返回</span>
<span slot="center">叩丁狼</span>
<span slot="left">菜單</span>
</my-com>
</div>
<template id="myCom">
<div>
<slot name="left">默認左側</slot>
<slot name="center">默認中間</slot>
<slot name="right">默認右側</slot>
</div>
</template>
<script src="js/vue.js"></script>
<script>
Vue.component('my-com',{
template:'#myCom'
})
var vm = new Vue({
el:'#app'
})
</script>
```
:-: 
