【Vue3】第十三部分插槽

文章目录

【Vue3】第十三部分插槽
13. 插槽
总结

13. 插槽

13.1 默认插槽

父组件

<script lang="ts" setup>
import Test from "./components/Test.vue"
</script>

<template>
  <div>
   <Test><h2>我是默认插槽</h2></Test>
  </div>
</template>

<style scoped lang='less'>
</style>

子组件

<script lang="ts" setup>
</script>

<template>
    <div>
      <p>Test组件</p>
      <!-- slot就是一个坑,传入的值会填到坑中 -->
      <slot></slot>
      <p>演示插槽的使用</p>
      <slot></slot>
    </div>
</template>

<style scoped lang='less'>
</style>

13.2 具名插槽

顾名思义就是有具体名字的插槽，那么简单来说就是通过具体的名字去填到具体的坑位

<script lang="ts" setup>
import Test from "./components/Test.vue"
</script>

<template>
  <div>
   <Test>
    <!-- v-slot必须在template元素上使用 -->
    <template v-slot:aaa>
      <h2>我是具名插槽</h2>
    </template>
   </Test>
  </div>
</template>

<style scoped lang='less'>
</style>

13.3 作用域插槽

用于：父组件控制结构，数据在子组件中

举例：子组件中有一个数据，在父组件中通过无序列表和有序列表展示该数据

父组件

<script lang="ts" setup>
import Test from "./components/Test.vue"
</script>

<template>
  <div>
   <Test>
      <!-- 固定写法,slotProps(这个名字可以改)可以接收到子组件传来的数据 -->
      <template v-slot:default="slotProps">
        <h2>{{slotProps.disorder}}</h2>
        <ul>
          <li v-for="item in slotProps.list">{{item}}</li>
        </ul>
      </template>
   </Test>
   <Test>
      <!-- 固定写法,slotProps(这个名字可以改)可以接收到子组件传来的数据 -->
      <template v-slot:default="slotProps">
        <h2>{{slotProps.order}}</h2>
        <ol>
          <li v-for="item in slotProps.list">{{item}}</li>
        </ol>
      </template>
   </Test>
  </div>
</template>

<style scoped lang='less'>
</style>

子组件

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

<template>
    <div>
      <p>Test组件</p>
      <!-- slot就是一个坑,传入的值会填到坑中 -->
      <!-- 在使用作用域插槽的使用子组件传值和props一样 -->
      <slot :list="list" disorder="无序列表" order="有序列表"></slot>
      <p>演示插槽的使用</p>
      <hr>
    </div>
</template>

<style scoped lang='less'>
</style>