Vue3具名插槽与作用域插槽

Vue3具名插槽与作用域插槽

具名插槽

<div id="app">
   <layout-component>
       <template v-slot:header>
           <header>我是头部区域</header>
       </template>
       <template v-slot:footer>
           <footer>我是底部区域</footer>
       </template>
   </layout-component>
</div>

<template id="layout">
   <div>
       <h3>具名插槽的使用</h3>
       <slot name="header">头部</slot>
       <article>文章</article>
       <slot name="footer">底部</slot>
   </div>
</template>
**注意点：
1）组件中定义具名插槽使用<slot name='插槽名'></slot>
2）其它组件中使用具名插槽时必须使用template进行包裹并写上插槽名。
使用具名插槽时每次都要写v-slot特别麻烦，可以使用#进行简写，如下：**
<template #header>
    <header>我是头部区域</header>
</template>
<template #footer>
    <footer>我是底部区域</footer>
</template>

作用域插槽

<div>
       <h3>作用于插槽</h3>
       <!-- 组件中遍历数据 -->
       <slot  :item="item"></slot>
   </div>
  v-slot = item   此处的 item  对应的是  :item  对象  解构 key item
   <demo-component v-slot="{item}">
       <!-- 注意：显示的是不同的元素 -->
       <div>{{ item }}</div>
       <!-- <p>{{ item }}</p>
       <span>{{ item }}</span> -->
   </demo-component>