vue3笔记六(slot插槽)

1、具名插槽使用

// 子组件
<template>
  <div>
    <slot name="left"></slot>
    <slot></slot>
    <slot name="right"></slot>
  </div>
</template>

// 父组件使用
<template>
    <template v-slot:left>
      <div>左边数据</div>
    </template>
    <template v-slot>
      <div>中间数据</div>
    </template>
    <template v-slot:right>
      <div>右边数据</div>
    </template>
</template>

// 插槽简写
<template>
    <template #left>
      <div>左边数据</div>
    </template>
    <template #default>
      <div>中间数据</div>
    </template>
    <template #right>
      <div>右边数据</div>
    </template>
</template>

2、作用域插槽

子组件绑定参数，传递父组件slot使用

// 子组件
<template>
  <div>
    <slot name="left"></slot>
    <slot :data="list"></slot>
    <slot name="right"></slot>
  </div>
</template>

<script setup lang="ts">
  const list = [ 1, 2, 3 ]
</script>

// 父组件
<template>
    <template v-slot:left>
      <div>左边数据</div>
    </template>
    <template v-slot="{ data }">
      <div>{{ data }}</div>
    </template>
    
	<!--  <template #default="{ data }">-->
	<!--    <div>{{ data }}</div>-->
	<!--  </template>-->
	
    <template v-slot:right>
      <div>右边数据</div>
    </template>
</template>

3、动态插槽

// 父组件
<template>
    <template #[site]>
      <div>那边的数据了？？？</div>
    </template>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  const site = ref('right')
</script>

原文链接：https://xiaoman.blog.csdn.net/article/details/122904105