学习Vue3 第十四章（插槽全家桶）

匿名插槽

子组件

<template>
  <div>我是Card组件</div>
  <slot />
</template>

父组件

<template>
  <Card>
    <div>e222</div>
  </Card>
</template>

具名插槽

子组件

<template>
  <slot name="header">
    <div>
      <h2>我是Card组件的头部默认的</h2>
    </div>
  </slot>
  <div>我是Card组件</div>
  <slot name="footer" />
</template>

父组件

<template>
  <Card>
    <template #header>
      <div>我是顶部</div>
    </template>
    <template #footer>
      <div>我是底部</div>
    </template>
  </Card>
</template>

作用域插槽

父组件

<template>
  <Card>
    <template #header="{ data }">
      <div>我是顶部 {{ data }}</div>
    </template>
    <template #footer>
      <div>我是底部</div>
    </template>
  </Card>
</template>

子组件

<template>
  <slot name="header" :data="name"> </slot>
  <div>我是Card组件</div>
</template>
<script setup>
import { ref } from 'vue'
const name = ref('yoga')
</script>