#### 1. 什么是插槽 --- 插槽的作用: 讓封裝的組件更加具有擴(kuò)展性 插槽就是子組件提供給父組件使用的一個(gè)占位符，用 `<slot></slot>` 表示，父組件可以在這個(gè)占位符中填充任何模板代碼，如：html、組件等，填充的內(nèi)容會替換到子組件中的 `<slot></slot>` 標(biāo)簽 #### 2. 基礎(chǔ)使用 --- ```html <div id="app"> <parent> 12323 </parent> </div> <script> var par = { template: `<div>hello <slot></slot></div>` } let vm = new Vue({ el: '#app', components: { parent: par } }) </script> ```  #### 3. 具名插槽 --- **`v-slot:` 可以簡寫為 `#`** ```html <div id="app"> <layout> <template v-slot:header> 123 </template> <template #main> 456 </template> <template #footer> 789 </template> </layout> </div> <script> var layout = { template: ` <div>hello <header> <slot name="header"></slot> </header> <main> <slot name="main"></slot> </main> <footer> <slot name="footer"></slot> </footer> </div> ` } let vm = new Vue({ el: '#app', components: { layout: layout } }) </script> ```