Vue3 插槽使用汇总

目录
  • 一、v-slot 介绍
  • 二、匿名插槽
  • 三、具名插槽
  • 四、作用域插槽
  • 五、动态插槽名

一、v-slot 介绍

v-slot 只能用在 template 或组件上使用，否则就会报错。

v-slot 也是其中一种指令。

使用示例：

//父组件代码
<child-com>
 <template v-slot:nameSlot>
  插槽内容
 </template>
</child-com> 

//组件模板
<slot name="nameSlot"></slot>
v-slot 的语法，简化 slot、slot-scope 作用域插槽的功能，相比更加强大，代码效率更高。

二、匿名插槽

当组件中只有一个插槽的时候，可以不设置 slot 的 name 属性，v-slot 后可以不带参数，但是 v-slot 在没有设置 name 属性的插槽口也会带有隐含的 “default”。

匿名插槽使用：

//组件调用
<child-com>
 <template v-slot>
  插槽内容
 </template>
</child-com> 

//组件模板
<slot ></slot>

虽然 v-slot 没有设置参数，但不能删除掉 ，否则插槽内容无法正常渲染。

三、具名插槽

一个组件中有多个插槽的时候，如果没有设置 v-slot 属性值，会默认把元素插到没有设置 name 属性值的 slot 组件中，为了把对应的元素放到指定的位置，就需要借助 v-slot 和 name 属性，把内容对应起来。

具名插槽使用：

//父组件
<child-com>
 <template v-slot:header>
  头部
 </template>
 <template v-slot:body>
  内容
 </template>
 <template v-slot:footer>
  脚
 </template>
</child-com> 

//子组件
<div>
 <slot name="header"></slot>
 <slot name="body"></slot>
 <slot name="footer"></slot>
</div>

具名插槽缩写：

v-slot 与 v-bind、v-on 指令一样，也存在缩写。可以把 v-slot: 简写为 # 号。

如上述 v-slot:footer 可以简写为 #footer 。

上述的父组件代码可以简化为：

<child-com>
 <template #header>
  头部
 </template>
 <template #body>
  内容
 </template>
 <template #footer>
  脚
 </template>
</child-com>

注意：和其他指令一样，只有存在参数时，才可以简写，否则是无效的。

四、作用域插槽

有时让插槽内容能够访问子组件中才有的数据是很有用的。当一个组件被用来渲染一个项目数组时，这是一个常见的情况，我们希望能够自定义每个项目的渲染方式。

要使子组件上的属性在插槽内容上可用，需要给 slot 绑定一个属性。然后在 v-slot 处接收并定义提供插槽 props 名字。

使用示例：

//
<child-com>
 <template v-slot:header="slotProps">
  插槽内容--{{ slotProps.item }} 序号--{{ slotProps.index }}
 </template>
</child-com> 

//子组件代码
<template>
 <div v-for="(item, index) in arr" :key="index">
  <slot :item="item" name="header" :index="index"></slot>
 </div>
</template>
<script setup>
 const arr = ['1111', '2222', '3333']
</script>

五、动态插槽名

v-slot 指令参数也可以是动态的，用来定义动态插槽名。

如：

<child-com>
 <template v-slot:[dd()]>
  动态插槽名
 </template>
</child-com> 

<script setup>
const dd = () => {
  return 'hre'
}

此处使用的是函数，也可以直接使用变量。

到此这篇关于Vue3 插槽使用汇总的文章就介绍到这了,更多相关Vue3 插槽使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue slot插槽的使用详情

    Vue slot插槽的使用详情

    目录 1.为什么使用slot 1.1 slot(插槽) 1.2 组件中的插槽 1.3 例子 2.如何封装这类组件(slot) 3. 插槽的案例 4.插槽默认值 5.具名插槽 6.编译作用域 7.作用域插槽 1.为什么使用slot 1.1 slot(插槽) 在生活中很多地方都有插槽,电脑usb的插槽,插板当中的电源插槽 插槽的目的是为了让我们原来的设备具备更多的扩展性 比如电脑的USB我们可以插入U盘,手机,鼠标,键盘等等 1.2 组件中的插槽 组件的插槽也是为了让我们的组件更具有扩展性 让使用者

  • 详解vue slot插槽的使用方法

    详解vue slot插槽的使用方法

    官方文档其实已经讲得很详细,我根据文档,把官方的小案例实现了一下,这样更直观 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://unpkg.com/vue@2.3.3/dist/vue.js"><

  • vue 插槽简介及使用示例

    Vue的插槽,是一种内容分发机制,但是我感觉它更加像组件的一种占位符的概念,通过插槽,等待组件外部传入复杂的内容. 使用插槽的好处 在以前的例子中todo-item插槽直接写在了todo-list插槽中,其实是比较不合理的,它会导致todo-list插槽比较死板,无法重用更多的其他组件. Vue.component("todo-list", { template: ` <ul> <todo-item v-on:delete="handleDelete&quo

  • 详解Vue中使用插槽（slot）、聚类插槽

    一.基本的插槽 这里总结两点 如果不在子组件中使用插槽(slot),那么在子组件中写任何代码都是无效的的,不会显示 (插槽默认值)如果子组件中没有插入任何代码的话就会显示组件插槽中的内容 slot 代表父组件往子组件中 插入的标签 这里就代表组件子组件中的 <p>Dell</p> <child> <p>Dell</p> </child> 这里如果是这样的 <child> </child> 就会显示 <sl

  • vue具名插槽的基本使用实例

    vue具名插槽的基本使用实例

    前言 具有名字的插槽slot使用 中的 "name" 属性绑定元素 注意: 1,如果没有匹配到 则放到匿名的插槽中 2,具名插槽的渲染顺序,完全取决于模板,而不是取决于父组件中元素的顺序 vue的匿名插槽(默认插槽) 父组件 <div> <myslot>我是刚刚</myslot> </div> 子组件 <div> <slot><slot> </div> vue的具名插槽 父组件 <di

  • Vue3 插槽使用汇总

    目录 一.v-slot 介绍 二.匿名插槽 三.具名插槽 四.作用域插槽 五.动态插槽名 一.v-slot 介绍 v-slot 只能用在 template 或组件上使用,否则就会报错. v-slot 也是其中一种指令. 使用示例: //父组件代码 <child-com> <template v-slot:nameSlot> 插槽内容 </template> </child-com> //组件模板 <slot name="nameSlot&qu

  • Vue3插槽Slot实现原理详解

    Vue3插槽Slot实现原理详解

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

  • Vue3父子通讯方式及Vue3插槽的使用方法详解

    在Vue3中父子通讯方式 Vue3父传子(props) 父组件如下: <template> <div class="about"> <h1>This is an about page</h1> <children :num="num" age="30"></children> </div> </template> <script> impo

  • Vue3中插槽(slot)用法汇总(推荐)

    Vue3中插槽(slot)用法汇总(推荐)

    目录 什么是插槽 默认内容 具名插槽 动态插槽名 作用域插槽 作用域插槽 具名作用域插槽 写在最后 Vue中的插槽相信使用过Vue的小伙伴或多或少的都用过,但是你是否了解它全部用法呢?本篇文章就为大家带来Vue3中插槽的全部用法来帮助大家查漏补缺. 什么是插槽 简单来说就是子组件中的提供给父组件使用的一个 坑位 ,用 <slot></slot> 表示,父组件可以在这个坑位中填充任何模板代码然后子组件中 <slot></slot> 就会被替换成这些内容.比如一

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

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

  • Vue3中插槽(slot)的全部使用方法

    Vue3中插槽(slot)的全部使用方法

    目录 什么是插槽 默认内容 具名插槽 动态插槽名 作用域插槽 作用域插槽 具名作用域插槽 写在最后 Vue中的插槽相信使用过Vue的小伙伴或多或少的都用过,但是它的所有用法你是否全部理解呢?本篇文章就为大家带来Vue3中插槽的全部用法来帮助大家查漏补缺. 什么是插槽 简单来说就是子组件中的提供给父组件使用的一个坑位,用<slot></slot> 表示,父组件可以在这个坑位中填充任何模板代码. 比如一个最简单插槽例子: //父组件 <template> <div&g

  • Vue3中slot插槽基本使用

    Vue3中slot插槽基本使用

    目录 1.插槽基本使用 2.插槽默认内容 3.具名插槽 3.1 基本使用 3.2 简写 3.3 默认插槽与具名插槽混用 4.动态插槽名 5.插槽作用域问题 6.作用域插槽 6.1 默认插槽作用域传值 6.2 具名插槽作用域传值 总结 使用Vue的小伙伴相信你一定使用过插槽,如果你没有用过,那说明你的项目可能不是特别复杂.插槽(slot)可以说在一个Vue项目里面处处都有它的身影,比如我们使用一些UI组件库的时候,我们通常可以使用插槽来自定义我们的内容. 1.插槽基本使用 插槽的用途就和它的名字一

  • vue3基础知识剖析

    vue3基础知识剖析

    目录 声明 vue3.0有哪些新特性 vue3.0的优缺点 如何解锁vue3.0 体验vue3.0的4中姿势 核心的composition API setup setup语法糖 ref.reactive watch跟watchEffect computed(计算属性) 组件通信 props emit 插槽 vue2中的使用 vue3中的使用 生命周期 vue-router 4.0 Composition API 路由守卫 keep-alive 和 transition 必须用在 router-v

  • vue.js动态组件和插槽的使用汇总

    vue.js动态组件和插槽的使用汇总

    目录 组件进阶-props校验 props校验 组件进阶 - 动态组件 组件进阶-keep-alive组件 keep-alive 组件进阶-keep-alive组件-指定缓存 组件进阶 - 默认插槽 格式 组件进阶-具名插槽 组件进阶-作用域插槽(难点) 自定义指令-基本使用 自定义指令-定义方式 示例 自动获取焦点 自定义指令-传值和更新 组件进阶-props校验 props校验 普通格式: props: ["propA", "propB"].没有类型检查 高阶格

  • vue3中的render函数里定义插槽和使用插槽

    目录 render函数里定义插槽和使用插槽 定义插槽 定义有插槽的组件使用插槽 vue3 render函数小变动 render函数的参数 render函数签名 VNode属性格式 render函数里定义插槽和使用插槽 vue3中this.slots和vue2的区别 vue3:this.slots是一个{ [name: string]: (…args: any[]) => Array | undefined }的对象,每个具名插槽的内容都要通过函数调用.如v-slot:foo插槽分发的内容通过th

随机推荐