vue3.2,组件中，匿名插槽，具名插槽，作用域插槽

插槽 向组件内部“指定位置”传递内容

匿名插槽

创建组件 sub.vue 定义匿名插槽

<template>
  <div class="root">
    <slot>匿名插槽</slot>
  </div>
</template>

匿名插槽使用

<template>
  <a-sub>
    <template #default>
      <h1>使用匿名插槽</h1>
    </template>
  </a-sub>
</template>

<script setup>
  import aSub from "@/components/sub.vue";
</script>

具名插槽

定义

<template>
  <div class="root">
    <slot name="header">具名插槽</slot>
    <slot>匿名插槽</slot>
  </div>
</template>

使用

<template>
  <a-sub>
    <template #default>
      <h1>使用匿名插槽</h1>
    </template>
    <template #header>
      <h1>使用具名插槽</h1>
    </template>
  </a-sub>
</template>

<script setup>
  import aSub from "@/components/sub.vue";
</script>

作用域插槽

作用域插槽用来 父组件 给 子组件传参

<template>
  <div class="root">
    <slot name="header" :data="{data:'123'}">具名插槽</slot>
    <slot :obj="{data:'456'}">匿名插槽</slot>
  </div>
</template>

使用

<template>
  <a-sub>
    <template #default="aaa">
      <h1>使用匿名插槽{{aaa.data.data}}</h1>
    </template>
    <template #header="bbb">
      <h1>使用具名插槽{{bbb.obj.data}}</h1>
    </template>
  </a-sub>
</template>

<script setup>
  import aSub from "@/components/sub.vue";
</script>

上一篇：vue3.2，组件中接收来自父组件的数据以及自定义事件

下一篇：原生js实现，复制文本功能