Vue3系列教程之插槽slot详解

目录
  • 1匿名插槽
  • 2具名插槽
  • 3作用域插槽
  • 4动态插槽

插槽就是子组件中的提供给父组件使用的一个占位符，用<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内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 关于VUE的编译作用域及slot作用域插槽问题

    关于VUE的编译作用域及slot作用域插槽问题

    什么是插槽?插槽的指令为v-slot,它目前取代了slot和slot-scope,插槽内容,vue实例一套内容分发的api,将slot元素作为承载分发内容的出口. 插槽分为单个插槽,具名插槽,还有作用域插槽,前两种比较简单这里就不赘述了,今天的重点是讨论作用域插槽. 简单来说,前两种插槽的内容和样式皆由父组件决定,也就是说显示什么内容和怎样显示都由父组件决定: 作用域插槽的样式由父组件决定,内容却由子组件控制.简单来说:前两种插槽不能绑定数据,作用域插槽是一个带绑定数据的插槽. 下面给大家介绍V

  • Vue3系列教程之插槽slot详解

    目录 1匿名插槽 2具名插槽 3作用域插槽 4动态插槽 插槽就是子组件中的提供给父组件使用的一个占位符,用<slot></slot> 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML.组件等,填充的内容会替换子组件的<slot></slot>标签. 1匿名插槽 (1)在子组件放置一个插槽,mytest.vue <template> <div> <slot>我这里设置默认值</slot> </d

  • Vue插槽_特殊特性slot,slot-scope与指令v-slot说明

    1.slot作用/概念:预先将将来要使用的内容进行保留: 2.具名插槽:给slot起个名字 3.slot.slot-scope已经被废弃推荐使用vue2.6.0中的v-slot:但是这边还是对新旧方法对做一下使用说明. slot插槽(不具名) <body> <div id="app"> <Test> <div>slot插槽占位内容</div> </Test> </div> <template id

  • Vue中插槽slot的使用方法与应用场景详析

    Vue中插槽slot的使用方法与应用场景详析

    什么是插槽? 我们知道在Vue中 Child 组件的标签 的中间是不可以包着什么的 . 可是往往在很多时候我们在使用组件的时候总想在组件间外面自定义一些标签,vue新增了一种插槽机制,叫做作用域插槽.要求的版本是2.1.0+: 插槽,其实就相当于占位符.它在组件中给你的HTML模板占了一个位置,让你来传入一些东西.插槽又分为 匿名插槽.具名插槽.作用域插槽. 在 2.6.0 中,我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令).它取代了 slot 和 slot-sc

  • Vue3插槽Slot实现原理详解

    Vue3插槽Slot实现原理详解

    目录 Vue官方对插槽的定义 Slot到底是什么 如何使用插槽 回顾组件渲染的原理 插槽的初始化原理 解析插槽中的内容 作用域插槽原理 具名插槽原理 默认内容插槽的原理 Vue官方对插槽的定义 Vue 实现了一套内容分发的 API,这套 API 的设计灵感源自 Web Components 规范草案,将 <slot> 元素作为承载分发内容的出口. Slot到底是什么 那么Slot到底是什么呢?Slot其实是一个接受父组件传过来的插槽内容,然后生成VNode并返回的函数. 我们一般是使用 <

  • JavaScript--在Vue中使用插槽:slot

    目录 在Vue中使用插槽:slot 作用域插槽:使用template标签包裹 总结 在Vue中使用插槽:slot 1.在子组件的template里可以直接使用slot标签<slot></slot>,它可以显示父组件向子组件插入的内容. 2.slot标签里面可以写一些默认值,当父组件没有插入内容的时候它就会显示默认值,插入内容时就只显示插入的内容. 3.当使用多个slot标签时,直接插入多个内容时,每个slot标签内都会包括所有插入的内容. 可以通过slot属性给插入的不同内容设置指

  • Spring Boot系列教程之死信队列详解

    前言 在说死信队列之前,我们先介绍下为什么需要用死信队列. 如果想直接了解死信对接,直接跳入下文的"死信队列"部分即可. ack机制和requeue-rejected属性 我们还是基于上篇<Spring Boot系列--7步集成RabbitMQ>的demo代码来说. 在项目springboot-demo我们看到application.yaml文件部分配置内容如下 ... listener: type: simple simple: acknowledge-mode: aut

  • Vue.js slot插槽的作用域插槽用法详解

    Vue.js slot插槽的作用域插槽用法详解

    目录 没有插槽的情况 Vue2.x 插槽 有插槽的情况 具名插槽 没有slot属性 插槽简单实例应用 作用域插槽 ( 2.1.0 新增 ) Vue3.x 插槽 插槽 作用域插槽 没有插槽的情况 <div id="app"> <child> <span>1111</span> </child> </div> <script> // 注册子组件 Vue.component("child"

  • vue3弹出层V3Popup实例详解

    vue3弹出层V3Popup实例详解

    Vue3-Popup 基于vue3构建的手机端自定义弹层组件. 一款集合了msg.alert.dialog.modal.actionSheet.toast等多种效果的Vue3自定义弹层组件.支持上下左右弹出.圆角.自定义弹层样式.多按钮及长按/右键功能. 引入v3popup // 在main.js中全局引入 import { createApp } from 'vue' import App from './App.vue' // 引入弹窗组件v3popup import V3Popup fro

  • Vue3中使用defineCustomElement 定义组件详解

    目录 使用 Vue 构建自定义元素 跳过组件解析 传递 DOM 属性 defineCustomElement() 生命周期 Props 事件 插槽 依赖注入 将 SFC 编译为自定义元素 基于 Vue 构建自定义元素库 defineComponent() defineAsyncComponent() 使用 Vue 构建自定义元素 Web Components 是一组 web 原生 API 的统称,允许开发者创建可复用的自定义元素 (custom elements). 自定义元素的主要好处是,它们

  • Jetbrains系列产品重置试用思路详解

    目录 0x0. 项目背景 0x1. 如何安装 0x2. 如何使用 0x3. 如何更新 0x4. 一些说明 0x5. 开源信息 本站惯例:本文假定你知道Jetbrains家的产品.不知道可以问问搜索引擎. 如果感觉此篇教程不够详细,还没搞定的,可以移步下面这篇教程,亲测可以. 最新idea2020激活码超详细教程(设置插件仓库成功激活到2099年) 没错,jetbrains-agent这个项目停止了.市面上漫天飞的各种最新都是其他大神的魔改版本.[/斜眼] 我不是要专门写个博文来说明jetbrai

  • Vue3 Reactive响应式原理逻辑详解

    Vue3 Reactive响应式原理逻辑详解

    目录 前言 一.怎么实现变量变化 二.怎么实现变量变化 三.将多个dep存储在Map中 四.将多个object的depsMap继续存储起来 五.核心 六.源码解析(TypeScript) 前言 本篇文章主要讲解vue响应式原理的逻辑,也就是vue怎么从最开始一步步推导出响应式的结构框架. 先从头构建一个简单函数推导出Vue3的Reactive原理,最后再进行源码的验证. 一.怎么实现变量变化 怎么实现变量变化,相关依赖的结果也跟着变化 当原本price=5变为price=20后total应该变为

  • Vue3 源码解读静态提升详解

    Vue3 源码解读静态提升详解

    目录 什么是静态提升 transform 转换器 hoistStatic 静态提升 walk 函数 walk 函数流程图 总结 什么是静态提升 静态提升是Vue3编译优化中的其中一个优化点.所谓的静态提升,就是指在编译器编译的过程中,将一些静态的节点或属性提升到渲染函数之外.下面,我们通过一个例子来深入理解什么是静态提升. 假设我们有如下模板: <div> <p>static text</p> <p>{{ title }}</p> </di

  • vue3封装echarts组件最佳形式详解

    目录 思路 目录结构 组件代码 v-charts.vue useCharts.ts type.d.ts options/bar.ts 项目中使用 index.vue /hooks/useStatisDeviceByUserObject.ts 思路 项目中经常用到echarts,不做封装直接拿来使用也行,但不可避免要写很多重复的配置代码,封装稍不注意又会过度封装,丢失了扩展性和可读性.始终没有找到一个好的实践,偶然看到一篇文章,给了灵感.找到了一个目前认为用起来很舒服的封装. 结合项目需求,针对不

  • Rust语言从入门到精通系列之Iterator迭代器深入详解

    目录 迭代器的基本概念 迭代器是什么? Iterator trait Animal示例 迭代器的常见用法 map方法 filter方法 enumerate方法 flat_map方法 zip方法 fold方法 结论 在Rust语言中,迭代器(Iterator)是一种极为重要的数据类型,它们用于遍历集合中的元素.Rust中的大多数集合类型都可转换为一个迭代器,使它们可以进行遍历,这包括数组.向量.哈希表等. 使用迭代器可以让代码更加简洁优雅,并且可以支持一些强大的操作,例如过滤.映射和折叠等. 在本

随机推荐