# 具名插槽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>
```
:-: 
