vue之插槽

默认插槽

在Vue.js中，默认插槽（Default Slots）是一种特殊的插槽类型，允许在组件模板中插入自定义内容。默认插槽是一种特殊的插槽类型，用于在组件模板中插入自定义内容。通过使用默认插槽，可以向组件添加额外的HTML标记和Vue.js模板，并对其进行自定义。默认插槽提供了一种灵活的方式来扩展组件的行为和外观，使其更加符合应用程序的需求。

优点：

1. 灵活性：默认插槽允许在组件模板中插入自定义内容，使得组件更加灵活和可定制。
2. 易于使用：默认插槽的使用非常简单，只需要在组件模板中添加自定义内容即可。
3. 可扩展性：通过使用默认插槽，可以轻松地扩展组件的功能和外观，使其更加符合的应用程序的需求。

缺点：

1. 内容重复：如果多个组件都使用相同的默认插槽，可能会导致内容重复。为了避免这种情况，可以使用具名插槽（Named Slots）来区分不同的插槽内容。
2. 性能影响：使用默认插槽可能会对性能产生一定的影响，因为每次渲染组件时都需要重新渲染默认插槽的内容。如果默认插槽的内容很大或者很复杂，可能会导致性能问题。

parent.vue:

<!--vue简单框架-->  
<!-- 声明这是一个Vue的简单框架 -->  
  
<!-- Vue模板部分 -->  
<template>  
   <!-- 创建一个父容器div -->  
   <div class="father">  
      <!-- 内容容器 -->  
      <div class="content">  
         <!-- 使用categeory组件，并传递title和内容 -->  
         <!-- 使用v-for循环显示游戏列表 -->  
         <categeory title="热门游戏列表">  
            <ul>  
               <!-- 使用v-for循环来展示游戏列表，g.game表示每个游戏的名字，g.id表示每个游戏的id -->  
               <li v-for="g in games" :key="g.id">{{ g.game }}</li>  
            </ul>  
         </categeory>  
         <!-- 显示图片 -->  
         <!-- 使用img标签来显示图片，:src绑定图片的URL -->  
         <categeory title="热门好吃美食">  
            <img :src="imgurl" alt="">  
         </categeory>  
         <!-- 显示视频 -->  
         <!-- 使用video标签来显示视频，:src绑定视频的URL，controls表示显示播放控件 -->  
         <categeory title="明日方舟视频">  
            <video :src="videourl" controls></video>  
         </categeory>  
      </div>  
   </div>  
   
</template>  
  
<!-- Vue脚本部分 -->  
<script lang='ts'setup name="">  
   import { reactive, ref } from 'vue'; // 导入Vue的响应式数据函数reactive和ref  
   import categeory from './category.vue'; // 导入自定义的category组件  
   // 使用reactive定义响应式数据，games是一个包含多个游戏信息的数组  
   let games = reactive([ // reactive用于创建响应式数据，数组中每个对象包含id和game属性  
      { id: '01', game: '王者荣耀' }, { id: '02', game: '和平精英' },  
      { id: '03', game: '英雄联盟' }, { id: '04', game: '明日方舟' },  
   ]);  
   // imgurl是图片的URL，videourl是视频的URL，这两个变量被用来在页面上展示图片和视频  
   let imgurl = 'https://img1.baidu.com/it/u=2424825469,1260195775&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500'; // 图片的URL  
   let videourl = 'https://cn-gdfs-ct-01-16.bilivideo.com/upgcxcode/21/89/1419598921/1419598921-1-16.mp4?e=ig8euxZM2rNcNbRVhwdVhwdlhWdVhwdVhoNvNC8BqJIzNbfq9rVEuxTEnE8L5F6VnEsSTx0vkX8fqJeYTj_lta53NCM=&uipk=5&nbs=1&deadline=1706502702&gen=playurlv2&os=bcache&oi=17621919&trid=00005accaef5ec9045a8a8250e8b59c482c0h&mid=0&platform=html5&upsig=9b82dc25b3dcfb5d79ea9d212dffb633&uparams=e,uipk,nbs,deadline,gen,os,oi,trid,mid,platform&cdnid=60916&bvc=vod&nettype=0&f=h_0_0&bw=52400&logo=80000000'; // 视频的URL  
</script>  

<style scoped>  
   /* 定义父容器 .father 的样式  */
   .father {  
       /* 设置父容器的背景颜色为 RGB(165, 164, 164)  */
      background-color: rgb(165, 164, 164);  
      /* 设置父容器的内边距为 20px  */
      padding: 20px;  
      /* 设置父容器的边框圆角为 10px  */
      border-radius: 10px;  
   }  
     
   /* 定义内容容器 .content 的样式 */
   .content {  
     /* 设置内容容器的显示方式为 flex，使其子元素以 flex 布局排列 */
      display: flex;  
    /* 设置内容容器内的子元素在主轴（默认为水平方向）上平均分布   */
      justify-content: space-evenly;  
     /* 设置内容容器内元素的字体大小为 20px  */
      font-size: 20px;  
   /* 设置内容容器内元素的字体粗细为 800（即粗体）  */
      font-weight: 800;  
   }  
     
/* 定义 img 和 video 标签的样式 */
   img, video {  
    /* 设置 img 和 video 的宽度为其父容器的 100%  */
      width: 100%;  
   }  
</style>

 category.vue:

<!-- 这是一个简单的 Vue 框架 -->  
  
<!-- Vue 模板部分 -->  
<template>  
    <!-- 创建一个 div 容器，类名为 "category" -->  
    <div class="category">  
        <!-- 在 div 中插入一个标题，内容从 props 中获取 -->  
        <h2>{{ title }}</h2>  
        <!-- 使用插槽来插入子组件或内容 -->  
        <slot></slot>  
    </div>  
</template>  
  
<!-- Vue 脚本部分 -->  
<script lang='ts' setup name="">  
    /* 定义一个名为 "title" 的 prop，它是一个字符串 */  
    defineProps(['title'])  
</script>  
  
<!-- Vue 样式部分 -->  
<style scoped>  
    /* "category" 类别的样式 */  
    .category{  
        /* 设置背景颜色为天蓝色 */  
        background-color: skyblue;  
        /* 设置边框圆角为10px */  
        border-radius: 10px;  
        /* 设置阴影效果 */  
        box-shadow: 0 0 10px;  
        /* 设置内边距为10px */  
        padding: 10px;  
        /* 设置宽度为200px */  
        width: 200px;  
        /* 设置高度为300px */  
        height: 300px;  
    }  
    /* "h2" 标题的样式 */  
    h2{  
        /* 设置背景颜色为橙色 */  
        background-color: orange;  
        /* 将标题文本居中对齐 */  
        text-align: center;  
    }  
</style>

 具名插槽：

具名插槽允许我们给插槽命名，这样我们就可以在父组件中指定要插入到哪个插槽中的内容。这样做的好处是，它使得组件的设计更加灵活和可复用。我们可以在同一个组件内定义多个插槽，并为它们分配不同的名字，从而使得父组件可以决定如何使用子组件的插槽。
在Vue 2.6.0及以后的版本中，推荐使用新的v-slot指令来指定具名插槽，这个指令取代了之前的slot和slot-scope属性。使用v-slot，我们可以指定一个模板变量，这个变量会变成作用域插槽的插槽对象，我们可以在其中定义需要传递给子组件的模板内容。
下面是具名插槽的官方介绍：
特点：
命名插槽允许开发者明确地指定要插入内容的插槽名称，从而在父组件中可以精确地控制内容的插入位置。
具名插槽可以使组件的模板更加清晰和易于理解，因为它们提供了一种明确的方式来指定和识别插槽。
具名插槽提高了组件的重用性，因为它们允许子组件提供多个插槽，而父组件可以根据需要选择使用哪个插槽。
优点：
提高了组件的模块化和可重用性：通过提供多个具名插槽，子组件可以提供不同的内容插槽，而父组件可以根据需要选择使用哪个插槽，从而实现更高级的组件重用。
更好的组件抽象：具名插槽可以帮助开发者创建抽象的组件，这些组件可以接受各种不同的内容，而不必关心具体的内容是什么。
更清晰的模板结构：通过使用具名插槽，模板的结构更加清晰，因为插槽的名称提供了明确的指示，哪些部分是由子组件提供的，哪些部分是由父组件提供的。
缺点：
学习曲线：对于新手来说，具名插槽可能会增加Vue.js的学习难度，因为它们涉及到插槽的概念和用法。
复杂性：在某些情况下，如果组件内有太多的具名插槽，可能会使得模板变得复杂和难以维护。

    <slot name="s2">默认内容</slot>  

  <categeory v-slot:s2 title="热门游戏列表">  
            <ul>  
               <!-- 使用v-for循环来展示游戏列表，g.game表示每个游戏的名字，g.id表示每个游戏的id -->  
               <li v-for="g in games" :key="g.id">{{ g.game }}</li>  
            </ul>  
         </categeory>  
         <!-- 显示图片 -->  
         <!-- 使用img标签来显示图片，:src绑定图片的URL -->  
         <categeory v-slot:s2 title="热门好吃美食">  
            <img :src="imgurl" alt="">  
         </categeory>  
         <!-- 显示视频 -->  
         <!-- 使用video标签来显示视频，:src绑定视频的URL，controls表示显示播放控件 -->  
         <categeory v-slot:s2 title="明日方舟视频">  
            <video :src="videourl" controls></video>  
         </categeory>