[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> ***** 瀏覽器效果：