脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue3插槽slot

Vue3系列教程之插槽slot详解

 更新时间：2022年08月10日 10:19:28   作者：LotusFlower  
插槽（slot）可以说在一个 Vue 项目里面处处都有它的身影，比如我们使用一些UI 组件库的时候，我们通常可以使用插槽来自定义我们的内容，今天通过本文给大家介绍vue3插槽slot的相关知识，感兴趣的朋友一起看看吧

插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。

1匿名插槽

(1)在子组件放置一个插槽,mytest.vue

<template>
    <div>
       <slot>我这里设置默认值</slot>
    </div>
</template>

(2)父组件使用插槽,在父组件给这个插槽填充内容，如果不设置内容就会引用子组件的内容

<myslot>
  <template v-slot>
    <div>我是插槽的值</div>
  </template>
</myslot>

2具名插槽

具名插槽其实就是给插槽取个名字。一个子组件可以放多个插槽，而且可以放在不同的地方，而父组件填充内容时，可以根据这个名字把内容填充到对应插槽中.

<template>
    <div>
        <slot name="header"></slot>
       <slot>我这里设置默认值</slot>
        <slot name="footer"></slot>
    </div>
</template>

父组件使用需对应名称.

<myslot>
  <template v-slot:header>
    <div>我是插槽header的值</div>
  </template>
  <template v-slot>
    <div>我是插槽的值</div>
  </template>
  <template v-slot:footer>
    <div>我是插槽footer的值</div>
  </template>
</myslot>

这里还可以进行简写

<myslot>
  <template #header>
    <div>我是插槽header的值</div>
  </template>
  <template #default>
    <div>我是插槽的值</div>
  </template>
  <template #footer>
    <div>我是插槽footer的值</div>
  </template>
</myslot>

3作用域插槽

在子组件动态绑定参数 派发给父组件的slot去使用.

<template>
    <div>
        <slot name="header"></slot>
        <div :key="item" v-for="item in 100">
            <slot v-bind:data="item">我这里设置默认值</slot>
        </div>
        <slot name="footer"></slot>
    </div>
</template>

通过结构方式取值：

<myslot>
  <template #header>
    <div>我是插槽header的值</div>
  </template>
  <template #default="{ data }">
    <div>我是插槽传过来的值{{ data }}</div>
  </template>
  <template #footer>
    <div>我是插槽footer的值</div>
  </template>
</myslot>

4动态插槽

插槽可以是一个变量名

<template>
  <div>
    <myslot>
      <template #[name]>
        <div>我是变量插槽{{name}}</div>
      </template>
    </myslot>
  </div>
</template>
 
<script setup lang="ts">
import myslot from './components/test_slot.vue'
import { ref } from 'vue'
const name = ref<string>('header')
</script>

到此这篇关于Vue3系列教程之插槽slot的文章就介绍到这了,更多相关vue3插槽slot内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 详解如何实现在Vue中导入Excel文件

    详解如何实现在Vue中导入Excel文件

    这篇文章主要介绍了如何在Vue中导入Excel文件，文中的示例代码讲解详细，对我们学习或工作有一定帮助，感兴趣的小伙伴可以跟随小编一起了解一下
    2022-01-01
  • Vue+Vuex实现自动登录的知识点详解

    Vue+Vuex实现自动登录的知识点详解

    在本篇文章里小编给大家整理的是关于Vue+Vuex实现自动登录的知识点详解，需要的朋友们可以学习下。
    2020-03-03
  • vue2的todolist入门小项目的详细解析

    vue2的todolist入门小项目的详细解析

    本篇文章主要介绍了vue2的todolist入门小项目的详细解析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • idea编译器vue缩进报错问题场景分析

    idea编译器vue缩进报错问题场景分析

    idea编译器出现Vue缩进报错，怎么解决呢，很多朋友遇到这个问题都很棘手，不知该如何解决，今天小编给大家通过场景分析介绍解决方案，需要的朋友参考下吧
    2021-07-07
  • Vue中全局限制输入特殊字符方式

    Vue中全局限制输入特殊字符方式

    这篇文章主要介绍了Vue中全局限制输入特殊字符方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue3使用vis绘制甘特图制作timeline可拖动时间轴及时间轴中文化(推荐)

    vue3使用vis绘制甘特图制作timeline可拖动时间轴及时间轴中文化(推荐)

    这篇文章主要介绍了vue3使用vis绘制甘特图制作timeline可拖动时间轴，时间轴中文化,本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-02-02
  • vue3中vite使用sass的配置方法

    vue3中vite使用sass的配置方法

    这篇文章主要介绍了vue3中vite使用sass的配置方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-01-01
  • 快速搭建vue2.0+boostrap项目的方法

    快速搭建vue2.0+boostrap项目的方法

    这篇文章主要介绍了快速搭建vue2.0+boostrap项目的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • 在vue中添加Echarts图表的基本使用教程

    在vue中添加Echarts图表的基本使用教程

    虽然老早就看过很多echarts的例子， 但自己接触的项目中一直都没有真正用到过，直到最近才开始真正使用，下面这篇文章主要给大家介绍了关于在vue中添加Echarts图表的基本使用教程，文中通过示例代码介绍的非常详细，需要的朋友可以参考下。
    2017-11-11
  • Vue 进入/离开动画效果

    Vue 进入/离开动画效果

    这篇文章主要介绍了Vue 进入/离开动画效果，代码简单易懂，非常不错，具有参考借鉴价值,需要的朋友可以参考下
    2017-12-12

最新评论