#### 1. 什么是插槽 --- 插槽的作用: 让封装的组件更加具有扩展性 插槽就是子组件提供给父组件使用的一个占位符，用 `<slot></slot>` 表示，父组件可以在这个占位符中填充任何模板代码，如：html、组件等，填充的内容会替换到子组件中的 `<slot></slot>` 标签 #### 2. 基础使用 --- ```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> ```