vue组件中的插槽

avatar
作者
猴君
阅读量:0

单个插槽

子组件中的插槽,通过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> 

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!