vue组件中的插槽

单个插槽

子组件中的插槽，通过slot标签实现。父组件通过template标签将自定义的内容插入到子组件中。

子组件：存在一个mian块的插槽

<template>   <div class="layout">     <div>标题</div>     <div class="main">       <slot></slot>     </div>   </div> </template> 

父组件：

<template>   <div>     <demo-child>       <template>         <div>父组件通过插槽自定义的内容</div>       </template>     </demo-child>   </div> </template> 

多个插槽（具名插槽）

多个插槽的情况下，需要对不同的插槽进行区分（插槽名）

子组件：有三个插槽 header,main,footer

<template>   <div class="layout">     <div class="header">       <slot></slot>     </div>     <div class="main">       <slot></slot>     </div>     <div class="footer">       <slot></slot>     </div>   </div> </template> 

父组件：通过v-slot:插槽名来进行具名插槽的插入

<template>   <div>     <demo-child>       <template v-slot:header>         <div>头部</div>       </template>       <template v-slot:main>         <div>主体</div>       </template>       <template v-slot:footer>         <div>底部</div>       </template>     </demo-child>   </div> </template> 

父组件：通过#插槽名来进行具名插槽的插入

<template>   <div>     <demo-child>       <template #header>         <div>头部</div>       </template>       <template #main>         <div>主体</div>       </template>       <template #footer>         <div>底部</div>       </template>     </demo-child>   </div> </template>