阅读量: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>