vue插槽

插槽（Slots）是一种强大的特性，它允许你在组件中预留内容区域，这些区域可以由使用该组件的父组件来填充具体内容，实现组件的灵活复用和内容的动态定制。

概念

插槽可以理解为组件模板中的占位符，父组件可以通过插槽向子组件传递自定义内容。Vue 3 中的插槽分为普通插槽和作用域插槽，普通插槽用于传递静态或动态内容，作用域插槽则允许子组件向父组件传递数据，使得父组件在填充插槽时可以使用这些数据。

使用

在components文件夹下创建我们的组件ChildComponet.vue。这个为子组件

  <template>
    <div>
      <h2>这是子组件</h2>
      <!-- 默认插槽 -->
      <slot></slot>
      <!-- 具名插槽 -->
      <slot name="top"></slot>
      <slot name="bottom"></slot>

      <!-- 作用域插槽 -->
      <slot name="list"  :list="list"></slot>
      <!-- 当有多个作用域插槽的时候 设置具名 -->
      <slot name="list2" :list2="list2"></slot>
    </div>
  </template>

  <script setup>
  import { ref} from 'vue';
  const list=ref([1,2,3]);
  const list2=ref(['q','w','e']);
  </script>

在父组件中使用

           <ChildComponet >
          <!-- 默认插槽 -->
            <slot ><span style="color: red;">使用默认插槽插入信息</span></slot>
           <br>
           <!-- 具名插槽 -->
           <template v-slot:top>
          <span style="font-size: 30px;"> 在具名插槽top中插入信息</span><br>
           </template>
      
           <!-- v-slot 可以简写为# -->
           <template #bottom>
            <span style="color: blueviolet;">在具名插槽bottom中插入信息 </span> 
           </template>
       
           <!-- 作用域插槽   -->
           <template #list="{list}">
            <div v-for="item in list " :key="item"><i>{{ item }}</i></div>
           </template>

           <template #list2="{list2}">
            <div v-for="item in list2 " :key="item"><strong>{{ item }}</strong></div>
           </template>
        </ChildComponet>

//引入
import ChildComponet from './components/ChildComponet.vue';

补充一点：如果只有一个作用域插槽的话，可以设置为匿名插槽。父组件直接使用#default来接收子组件传过来的数据，多个作用域插槽则需要设置name。

效果图：

end

插槽用于实现组件的内容定制，让父组件可以灵活地定义子组件内部的部分内容。(如有误欢迎指正)