[TOC] # 插槽 <br> >slot翻译为插槽，组件的插槽： > >1. 组件的插槽也是为了让我们封装的组件更加具有扩展性。 > >2. 让使用者可以决定组件内容的一些内容到底展示什么。 <br> ### 1.如何使用 <br> >1. 在子组件中，使用特殊的元素`<slot>`就可以为子组件开启一个插槽。 > >2. 该插槽插入什么内容取决于父组件如何使用。 <br>  <br> ### 2.具名插槽 >当子组件的功能复杂时，子组件的插槽可能并非是一个。 > >1. 比如我们封装一个导航栏的子组件，可能就需要三个插槽，分别代表左边、中间、右边。 > >2. 那么，外面在给插槽插入内容时，如何区分插入的是哪一个呢？ > >3. 这个时候，我们就需要给插槽起一个名字 **如何使用具名插槽呢？** >1. 非常简单，只要给slot元素一个name属性即可 > >2. `<slot name='myslot'></slot>` <br> <br> ``` <div id="app"> <my-con> <!-- 使用slot = “标签名" 跟组件内的插槽进行关联 --> <span slot="center">中间内容</span> <span slot="right">右边内容</span> <span slot="left">左边内容</span> </my-con> </div> </body> <template id="temp"> <!-- 如果组件内使用的插槽是多个时，使用具名插槽的方式 <slot name="标签名"></slot> --> <div> <slot name="right"></slot> <slot name="left"></slot> <slot name="center"></slot> </div> </template> <script> new Vue({ el: '#app', components: { 'MyCon': { template: '#temp' } } }) </script> ``` <br> <br> ***** 浏览器效果：