首页 前端知识 Vue3从入门到实战:深度掌握通信插槽slot

Vue3从入门到实战:深度掌握通信插槽slot

2024-04-19 21:04:51 前端知识 前端哥 876 741 我要收藏

slot_默认插槽的概念:

在Vue中,插槽(slot)是一种用于在组件中插入内容的特殊技术。默认插槽是其中一种类型的插槽,它允许你在组件的模板中指定一个位置,以便在使用组件时插入自定义的内容。

想象一下你有一个组件,它有一些固定的结构和内容,但你希望在使用这个组件时,能够灵活地插入额外的内容。这就像是你有一个模板,但你希望能够在特定的位置插入自己的文本或元素。

默认插槽就是为了满足这个需求而设计的。在组件的模板中,你可以使用 <slot></slot> 标签来标记一个位置,表示这里可以插入额外的内容。当你在使用组件时,可以将自定义的内容放置在这个位置,这样它们就会被插入到组件的对应位置上。

以一个简单的卡片组件为例,卡片的主体部分是固定的,但你希望在卡片的底部插入自己的文本或按钮。你可以在组件的模板中定义一个默认插槽,使用 <slot></slot> 标签表示插入位置。然后,在使用组件时,你可以在对应的位置插入自己的内容。

默认插槽允许你以一种灵活的方式定制组件的部分内容,使组件能够适应不同的使用场景和需求。通过使用默认插槽,你可以将一些组件的部分交给使用者来灵活控制,增加了组件的可定制性和复用性。

但需要注意的是,默认插槽可以有默认内容,即当没有提供自定义内容时,会显示默认内容。你可以在 <slot></slot> 标签中添加默认的文本或元素,这样当没有插入自定义内容时,会显示默认内容。

1_slot_默认插槽 

 1.准备一个父组件(Father.vue)

2.子组件 Category.vue

整体展示:

  

 1.父组件给子组件传标题title

 展示:

 2.在父组件定义数据,分别放入到不同标题下的内容

 3.用双组件,把每块要传入的数据会放在slot之间

 展示:

补充:

为什么要用slot插槽呢 ?

因为可以渲染不同的内容,游戏是数组,美食是图片,影视是视频

你如何把他们分别呈现在对应标题下呢,就可以用slot插槽了(其实用v-if/show也可以,但插槽更好)

不然你看下面:

 Father.vue代码:

<template>
  <div class="father">
    <h3>父组件</h3>
    <div class="content">
      <Category>
          <ul>
            <li v-for="g in games" :key="g.id">{{ g.name }}</li>
          </ul>
      
          <h2>热门游戏列表</h2>
      </Category>

      <Category>
   
          <img :src="imgUrl" alt="">
          <h2>今日美食城市</h2>
      </Category>

      <Category>
          <video video :src="videoUrl" controls></video>
          <h2>今日影视推荐</h2>
      </Category>
    </div>
  </div>
</template>

<script setup lang="ts" name="Father">
  import Category from './Category.vue'
  import { ref,reactive } from "vue";

  let games = reactive([
    {id:'asgytdfats01',name:'英雄联盟'},
    {id:'asgytdfats02',name:'王者农药'},
    {id:'asgytdfats03',name:'红色警戒'},
    {id:'asgytdfats04',name:'斗罗大陆'}
  ])
  let imgUrl = ref('https://z1.ax1x.com/2023/11/19/piNxLo4.jpg')
  let videoUrl = ref('http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4')

</script>

<style scoped>
  .father {
    background-color: rgb(165, 164, 164);
    padding: 20px;
    border-radius: 10px;
  }
  .content {
    display: flex;
    justify-content: space-evenly;
  }
  img,video {
    width: 100%;
  }
  h2 {
    background-color: orange;
    text-align: center;
    font-size: 20px;
    font-weight: 800;
  }
</style>

Category.vue代码: 

<template>
  <div class="category">
    <slot>默认内容</slot>
   
  </div>
</template>

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

<style scoped>
  .category {
    background-color: skyblue;
    border-radius: 10px;
    box-shadow: 0 0 10px;
    padding: 10px;
    width: 200px;
    height: 300px;
  }
</style>


2_slot_具名插槽 

slot_具名插槽的概念:和默认插槽没什么区别 ,只是给插槽起了个名字。

如果给 插槽起个名,

 此时<Category>没有引用s2,所以去寻找默认插槽,找不到名为s2的插槽,所以不呈现。

那如何引用呢?

1.用v-slot指令

2.将v-slot指令放在<template>中

呈现: 

 

也可以通过具名插槽来对数据进行自己想要排放好的顺序。

 

补充:

v-slot指令可以用“#”来代替 

  Father.vue代码:

<template>
  <div class="father">
    <h3>父组件</h3>
    <div class="content">
      <Category>
        <template v-slot:s2>
          <ul>
            <li v-for="g in games" :key="g.id">{{ g.name }}</li>
          </ul>
        </template>
        <template v-slot:s1>
          <h2>热门游戏列表</h2>
        </template>
      </Category>

      <Category>
        <template v-slot:s2>
          <img :src="imgUrl" alt="">
        </template>
        <template v-slot:s1>
          <h2>今日美食城市</h2>
        </template>
      </Category>

      <Category>
        <template #s2>
          <video video :src="videoUrl" controls></video>
        </template>
        <template #s1>
          <h2>今日影视推荐</h2>
        </template>
      </Category>
    </div>
  </div>
</template>

<script setup lang="ts" name="Father">
  import Category from './Category.vue'
  import { ref,reactive } from "vue";

  let games = reactive([
    {id:'asgytdfats01',name:'英雄联盟'},
    {id:'asgytdfats02',name:'王者农药'},
    {id:'asgytdfats03',name:'红色警戒'},
    {id:'asgytdfats04',name:'斗罗大陆'}
  ])
  let imgUrl = ref('https://z1.ax1x.com/2023/11/19/piNxLo4.jpg')
  let videoUrl = ref('http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4')

</script>

<style scoped>
  .father {
    background-color: rgb(165, 164, 164);
    padding: 20px;
    border-radius: 10px;
  }
  .content {
    display: flex;
    justify-content: space-evenly;
  }
  img,video {
    width: 100%;
  }
  h2 {
    background-color: orange;
    text-align: center;
    font-size: 20px;
    font-weight: 800;
  }
</style>

Category.vue代码: 

<template>
  <div class="category">
    <slot name="s1">默认内容</slot>
    <slot name="s2">默认内容</slot>
   
  </div>
</template>

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

<style scoped>
  .category {
    background-color: skyblue;
    border-radius: 10px;
    box-shadow: 0 0 10px;
    padding: 10px;
    width: 200px;
    height: 300px;
  }
</style>


3_slot_作用域插槽

slot_作用域插槽的概念: 

在Vue中,作用域插槽(scoped slot)是一种特殊的插槽技术,它允许你向组件传递数据,并在插槽内部使用这些数据。

想象一下你有一个组件,它有一个插槽,你希望能够向插槽内部传递一些数据,并在插槽内部根据这些数据进行一些处理或显示。这就像是你给一个盒子里面放入了一些物品,并允许别人在盒子里对这些物品进行操作。

作用域插槽就是为了满足这个需求而设计的。在组件的模板中,你可以使用 <slot> 标签,并在标签中添加一个特殊的属性,比如 v-slot,来定义作用域插槽。通过这个属性,你可以向插槽内部传递数据。

当你在使用组件时,可以在组件的标签中使用特殊的语法,比如 v-slot 或 slot-scope,来接收传递给插槽的数据。然后,在插槽内部,你可以使用这些数据进行一些处理、显示或其他操作。

 要想讲好作用域插槽 ,先对组件进行部分修改

1.将Category.vue组件替换成Game.vue组件

2.父组件(Father.vue)调用三次子组件(Game.vue) 

展示:

3.现在,我要将标题下的游戏内容进行如下修改
1.第一个是无序列表

2.第二个是有序列表 

3.第三个不是列表,是h3标签表示

 数据在子组件这里,但是根据数据生成的结构,却由父组件来决定。但是父组件不能直接拿到子组件的数据,这就涉及到作用域的问题,我们可以用作用域插槽来解决这个问题。


 补充:

大部分作用域插槽都是应用在UI库中,就好像UI库的作者在子组件写好了数据,你直接拿来决定数据的结构,嘿嘿嘿。

Father.vue代码:

<template>
  <div class="father">
    <h3>父组件</h3>
    <div class="content">
      <Game>
        <template v-slot="params">
          <ul>
            <li v-for="y in params.youxi" :key="y.id">
              {{ y.name }}
            </li>
          </ul>
        </template>
      </Game>

      <Game>
        <template v-slot="params">
          <ol>
            <li v-for="item in params.youxi" :key="item.id">
              {{ item.name }}
            </li>
          </ol>
        </template>
      </Game>

      <Game>
        <template #default="{youxi}">
          <h3 v-for="g in youxi" :key="g.id">{{ g.name }}</h3>
        </template>
      </Game>

    </div>
  </div>
</template>

<script setup lang="ts" name="Father">
  import Game from './Game.vue'
</script>

<style scoped>
  .father {
    background-color: rgb(165, 164, 164);
    padding: 20px;
    border-radius: 10px;
  }
  .content {
    display: flex;
    justify-content: space-evenly;
  }
  img,video {
    width: 100%;
  }
</style>

Category.vue代码:

<template>
  <div class="game">
    <h2>游戏列表</h2>
    <slot :youxi="games"></slot>
  </div>
</template>

<script setup lang="ts" name="Game">
  import {reactive} from 'vue'
  let games = reactive([
    {id:'asgytdfats01',name:'英雄联盟'},
    {id:'asgytdfats02',name:'王者农药'},
    {id:'asgytdfats03',name:'红色警戒'},
    {id:'asgytdfats04',name:'斗罗大陆'}
  ])
</script>

<style scoped>
  .game {
    width: 200px;
    height: 300px;
    background-color: skyblue;
    border-radius: 10px;
    box-shadow: 0 0 10px;
  }
  h2 {
    background-color: orange;
    text-align: center;
    font-size: 20px;
    font-weight: 800;
  }
</style>

总结:

总结起来,Vue中的插槽分为三种类型:默认插槽(Default Slot)、作用域插槽(Scoped Slot)和具名插槽(Named Slot)。

  1. 默认插槽(Default Slot):允许在组件中指定一个位置,用于插入自定义内容。可以提供默认内容,当没有自定义内容时,显示默认内容。默认插槽增加了组件的可复用性和灵活性。

  2. 作用域插槽(Scoped Slot):允许向组件传递数据,并在插槽内部使用这些数据进行处理或显示。通过作用域插槽,使用者可以将数据从组件传递到插槽内部,实现高级的定制功能。

  3. 具名插槽(Named Slot):允许在组件中定义多个命名的插槽,并通过名称来指定要插入的内容。使用具名插槽,我们可以在组件的模板中为每个插槽指定特定的名称,并在使用组件时通过特殊的语法将内容插入到指定的插槽中。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/5336.html
标签
评论
发布的文章

用js生成小米商城

2024-04-27 21:04:59

网页汇率计算器vue代码

2024-04-26 13:04:44

Python读写Json文件

2024-04-23 22:04:19

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!