Vue 插槽（slot）详细介绍（对比版本变化，避免踩坑）

news2025/2/25 22:10:32

目录

前言

正文

插槽是什么？

怎么使用插槽？

基本用法

后备（默认）内容

具名插槽

作用域插槽

插槽版本变化

总结

前言

Vue中的插槽（slot）在项目中用的也是比较多的，今天就来介绍一下插槽的基本使用以及Vue版本更新之后的插槽用法变化。

正文

插槽是什么？

插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。简单理解就是子组件中留下个“坑”，父组件可以使用指定内容来补“坑”。以下举例子帮助理解。

怎么使用插槽？

基本用法

现在，有两个组件，A与B，分别如下：

A.vue

<template>
  <div>
    <p>我是A组件</p>
  </div>
</template>

<script>
export default {
  name:'A',
  data(){
    return {

    }
  }
}
</script>

B.vue

<template>
  <div>
    <p>我是B组件</p>
  </div>
</template>

<script>
export default {
  name:'B',
  data(){
    return {

    }
  }
}
</script>

将B组件引入A组件里面（此时B为A的子组件）

<template>
  <div>
    <p>我是A组件</p>
    <B><B/>
  </div>
</template>

<script>
import B from './B.vue'    //引入B组件
export default {
  name:'A',
  components:{      //注册B组件
    B
  },
  data(){
    return {

    }
  }
}
</script>

页面效果如下：

准备工作完毕，现在，在B组件里面使用插槽（slot）

<template>
  <div>
    <p>我是B组件</p>
    <slot></slot>     //插槽的使用方式
  </div>
</template>

<script>
export default {
  name:'B',
  data(){
    return {

    }
  }
}
</script>

此时页面并无变化（最开始的情况），当然，B组件中使用了插槽slot之后，相当于留下了一个“坑”，占了个位置。 那么如何验证其存在了呢？

此时，修改A组件里面的代码

<template>
  <div>
    <p>我是A组件</p>
    <B>  
      验证插槽是否生效      //用B组件标签包裹内容，验证slot
    </B>
  </div>
</template>

<script>
import B from './B.vue'
export default {
  name:'A',
  components:{
    B
  },
  data(){
    return {

    }
  }
}
</script>

此时页面的效果如下：

页面中多出了在A中用B包裹的内容。没错，这就是插槽的基本使用，是不是很简单？

Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 <slot> 元素作为承载分发内容的出口。

如上面的例子，当组件渲染的时候，<slot></slot> 将会被替换为“验证插槽是否生效”（即指定内容）。插槽内可以包含任何模板代码，包括 HTML：

<template>
  <div class="main">
    <p>我是A组件</p>
    <B>
      <span style="color:red">验证插槽是否生效</span>    //内容为html
    </B>
  </div>
</template>

页面效果如下：

插槽内也可以放其他组件，如此时再新建一个组件C：

<template>
  <div>
    <p>我是C组件</p>
  </div>
</template>

<script>
export default {
  name:'C',
  data(){
    return {

    }
  }
}
</script>

在A组件中，将B组件包裹的内容换成C组件：

<template>
  <div class="main">
    <p>我是A组件</p>
    <B>
      <!-- <span style="color:red">验证插槽是否生效</span> -->
      <C />         //插入C组件
    </B>
  </div>
</template>

<script>
import B from './B.vue'
import C from './C.vue'   //引入C组件
export default {
  name:'A',
  components:{
    B,
    C      //注册C组件
  },
  data(){
    return {

    }
  }
}
</script>

页面效果如下：

此时检查页面元素，我们会发现，在原本B组件中<slot></slot>的位置，替换成了C组件：  

//B.vue
<template>
  <div>
    <p>我是B组件</p>
    <slot></slot>
  </div>
</template>

//观察页面元素,<slot></slot>被替换成C组件

也印证了开篇对插槽作用的解释，即使用<slot></slot>的组件指定的位置留一个坑，如果在外部，使用其组件包裹某内容（可以是任何模板代码，也可以是HTML，还可以是组件），则该内容就会被分发到<slot></slot>处（一个有趣的说法就是把“坑”补上），渲染出来。当然，也可以不放任何内容，不影响组件渲染，就好比最开始的情况。

注意：如果B组件的 template 中没有包含一个 <slot> 元素，即不使用插槽，则该组件起始标签和结束标签之间的任何内容都会被抛弃。例如：

//B.vue
<template>
  <div>
    <p>我是B组件</p>
    <!-- <slot></slot> -->   //不使用插槽
  </div>
</template>
//A.vue
<template>
  <div>
    <p>我是A组件</p>
    <B>
      <!-- <span style="color:red">验证插槽是否生效</span> -->
      <C />
    </B>
  </div>
</template>

//此时在<B></B>包裹的内容都会被抛弃

页面效果如下，在B组件中插入的C组件被抛弃了，因为B组件中没使用插槽：

后备（默认）内容

有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的，它只会在没有提供内容的时候被渲染。例如在B组件中：

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

我们可能希望这个B组件内绝大多数情况下都渲染文本“我是B组件”。为了将“我是B组件”作为后备内容，我们可以将它放在 <slot> 标签内：

<template>
  <div>
    <slot><p>我是B组件</p></slot>
  </div>
</template>

现在当我在一个父级组件中使用B组件并且不提供任何插槽内容时：

<B></B>

后备内容“我是B组件”将会被渲染：

但是如果我们提供内容： 

<B>
  <p>我是插槽内容</p>
</B>

则这个提供的内容将会被渲染从而取代后备内容： 

具名插槽

所谓具名插槽，顾名思义就是起了名字的插槽。有时我们需要多个插槽，例如当我们想使用某种通用模板：

<template>
  <div>
    <header>
      <!-- 我们希望把页头放这里 -->
    </header>
    <main>
      <!-- 我们希望把主要内容放这里 -->
    </main>
    <footer>
      <!-- 我们希望把页脚放这里 -->
    </footer>
  </div>
</template>

对于这样的情况，<slot> 元素有一个特殊的 attribute：name。这个 attribute 可以用来定义额外的插槽： 

//B.vue
<template>
  <div>
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

一个不带 name 的 <slot> 出口会带有隐含的名字“default”。

在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 slot 指令，并以 slot 的参数的形式提供其名称（当然也可以直接放在标签中，如<div slot="header">）：

<template>
  <div>
    <p>我是A组件</p>
    <B>
      <template slot="header">
        <p>我是header部分</p>
      </template>

      <p>我是main（默认插槽）部分</p>

      <template slot="footer">
        <p>我是footer部分</p>
      </template>
    </B>
  </div>
</template>

现在 <template> 元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有slot 的 <template> 中的内容都会被视为默认插槽的内容。

页面效果如下：

观察页面元素，内容被放入相应名字的插槽中：

Tips：说到这里就不得不提一下，这种方式在项目中比较常用，可以当成一个复用（通用）模板组件。如多个组件的布局使用相似模板，只是具体内容不同，那么我们可以使用这种插槽方式封装成一个通用组件，在其他组件使用的时候只需要传对应的内容到对应名字的插槽即可，不需要将该模板在每个组件重新写一遍，减少代码冗余，大大提高开发效率。

作用域插槽

有时让插槽内容能够访问子组件中才有的数据是很有用的。现在，假设B组件：

<template>
  <div>
    <p>我是B组件</p>
    <slot>{{obj.firstName}}</slot>
  </div>
</template>

<script>
export default {
  name:'B',
  data(){
    return {
      obj:{
        firstName:'leo',
        lastName:'lion'
      }
    }
  }
}
</script>

我们可能想换掉备用内容，用“lion”来显示。如下，在A组件：

<template>
  <div>
    <p>我是A组件</p>
    <B>
      {{obj.lastName}}
    </B>
  </div>
</template>

然而上述代码不会正常工作，因为只有B组件可以访问到 obj，而我们提供的内容是在父级渲染的，即在父级作用域中。页面并无变化：

为了让 obj在父级的插槽内容中可用，我们可以将 obj作为 <slot> 元素的一个 attribute 绑定上去：

<template>
  <div>
    <p>我是B组件</p>
    <slot :obj="obj">{{obj.firstName}}</slot>
  </div>
</template>

绑定在 <slot> 元素上的 attribute 被称为插槽 prop。现在在父级作用域中，我们可以使用带值的 slot-scope 来定义我们提供的插槽 prop 的名字：

<template>
  <div class="main">
    <p>我是A组件</p>
    <B>
      <template slot-scope="data">
        {{data.obj.lastName}}
      </template>
    </B>
  </div>
</template>

在这个例子中，我们选择将包含所有插槽 prop 的对象命名为 data，但你也可以使用任意你喜欢的名字。此时页面效果如下：

如果你有使用过ElementUI里面的表格el-table，当改变某一列展示的字段时，我们经常使用：

<el-table-column>
  <template slot-scope="scope">
    <span>{{scope.row.xxx}}</span>
  </template>
</el-table-column>

插槽版本变化

v-slot 指令自 Vue 2.6.0 起被引入，提供更好的支持 slot 和 slot-scope attribute 的 API 替代方案。v-slot 完整的由来参见这份 RFC。在接下来所有的 2.x 版本中 slot 和 slot-scope attribute 仍会被支持，但已经被官方废弃且不会出现在 Vue 3 中。也就是说，在vue2版本中，我们仍可以使用slot跟slot-scope，但是在vue3中就只能使用v-slot了。

原来的带有slot的具名插槽

//B.vue
<template>
  <div>
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

写法变化，使用v-slot

<template>
  <div>
    <p>我是A组件</p>
    <B>
      <template v-slot:header>
        <p>我是header部分</p>
      </template>

      <p>我是main（默认插槽）部分</p>

      <template v-slot:footer>
        <p>我是footer部分</p>
      </template>
    </B>
  </div>
</template>

原来的作用域插槽

<template>
  <div class="main">
    <p>我是A组件</p>
    <B>
      <template slot-scope="data">
        {{data.obj.lastName}}
      </template>
    </B>
  </div>
</template>

写法变化，使用v-slot

<template>
  <div class="main">
    <p>我是A组件</p>
    <B>
      <template v-slot="data">
        {{data.obj.lastName}}
      </template>
    </B>
  </div>
</template>

总结

在 2.6.0 中，为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute。新语法的由来可查阅这份 RFC。注意slot版本变化，vue2中仍可以使用slot与slot-scope，但是vue3只能使用v-slot了，切记，避免踩坑。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/405475.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

npm install 提示Unable to authenticate, need: BASIC realm=“Sonatype Nexus Repository Manager“

npm install 提示Unable to authenticate, need: BASIC realm=“Sonatype Nexus Repository Manager“

场景&#xff1a; 执行npm install时提示Unable to authenticate Password: Email: (this IS public) xxqq.com Logged in as uploader on http://192.168.xx.xxx:8074/repository/npm-internal/. PS D:\GitworkspaceUi\gisquest-cloud-ui-workcenter> npm install npm ERR…
阅读更多...
【登录界面】vue、element-ui登录界面模板

【登录界面】vue、element-ui登录界面模板

vue、element-ui登录界面模板这里总结一个用vue、element-ui写的登录界面&#xff0c;为以后复制粘贴备用。 截图 代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>登录</title><!--…
阅读更多...
vue-quill-editor富文本编辑器使用步骤

vue-quill-editor富文本编辑器使用步骤

首先放上效果图 目录 1.安装 2.引入到项目中 3.在页面上写组件 4.配置option 5.给工具栏鼠标悬停加上中文释义 6.上传图片到七牛云 7.自定义控制图片大小 1.安装 npm install vue-quill-editor -S2.引入到项目中 有两种挂载方式&#xff1a; 全局挂载 和 在组件中挂载&…
阅读更多...
【Vue插槽详解】

【Vue插槽详解】

Vue插槽详解Vue插槽的作用一、默认插槽完整代码&#xff1a;二、具名插槽完整代码&#xff1a;三、作用域插槽完整代码如下&#xff1a;Vue插槽的作用 Vue插槽是Vue中常见的一种组件间的相互通信方式&#xff0c;作用是让父组件可以向子组件指定位置插入html结构&#xff0c;适…
阅读更多...
记录--前端性能优化——首页资源压缩63%、白屏时间缩短86%

记录--前端性能优化——首页资源压缩63%、白屏时间缩短86%

这里给大家分享我在网上总结出来的一些知识&#xff0c;希望对大家有所帮助 提升首屏的加载速度&#xff0c;是前端性能优化中最重要的环节&#xff0c;这里笔者梳理出一些 常规且有效 的首屏优化建议 目标&#xff1a; 通过对比优化前后的性能变化&#xff0c;来验证方案的有效…
阅读更多...
除夕最绚丽3D烟花代码（html+音效）

除夕最绚丽3D烟花代码（html+音效）

今天就是除夕了&#xff0c;新年怎么能少得了烟花呢&#xff1f;虽然绝大部分地区禁止燃放烟花&#xff0c;但该欣赏的烟花还是要欣赏滴~~ 最近整理文件&#xff0c;找到了一份烟花代码&#xff0c;3D特效&#xff0c;今天分享给大家&#xff0c;希望大家喜欢。 话不多说&#…
阅读更多...
uni.getLocation和wx.getLocation方法调用无效，也不返回失败，解决方案！！！

uni.getLocation和wx.getLocation方法调用无效，也不返回失败，解决方案！！！

线上已解决问题的代码 记录时间 2022.12.10 //获得地理定位信息uni.getLocation({type: wgs84,success: function(resp) {console.log(11111);//保存纬度数据let latitude resp.latitude;//保存经度度数据let longitude resp.longitude;console.log(经度 latitude);console…
阅读更多...
【Vue项目搭建】修改【若依框架】的侧边栏、导航栏、面包屑样式、修改全局页面样式

【Vue项目搭建】修改【若依框架】的侧边栏、导航栏、面包屑样式、修改全局页面样式

掌握分寸感&#xff0c;找目标一致的人协同你&#xff0c;有效地调配资源&#xff0c;就可以提高效率。 写在前面的话&#xff1a;博主最近想要搭建自己的前端若依项目&#xff0c;因此此系列博客会做一些记录。我的项目gitee地址&#xff1a; https://gitee.com/xuruicong/rac…
阅读更多...
less和sass的区别[简洁易懂]

less和sass的区别[简洁易懂]

一、基础知识 1.sass&#xff0c;less都是CSS的预处理器&#xff0c;其基本思想就是用编程的思路编写CSS代码。增加了变量&#xff0c;嵌套&#xff0c;函数&#xff0c;语句&#xff0c;继承等概念。有助于模块化开发&#xff0c;例如写一个换肤的效果&#xff0c;以前我们需要…
阅读更多...
前端200道面试题及答案（更新中）

前端200道面试题及答案（更新中）

目录 html相关 1&#xff09;说一下对cookie和Storage(localStorage和sessionStorage) 的认识和区别&#xff1f; 2&#xff09;link和import的区别 3&#xff09;浏览器如何实现不同标签页的通信&#xff1f; 4&#xff09;iframe的优缺点 5&#xff09;canvas 6&#x…
阅读更多...
Sublime Text 4 (Build 4143) 注册方法STEP BY STEP

Sublime Text 4 (Build 4143) 注册方法STEP BY STEP

To 初学Python的Pythonista: Sublime Text相对于PyCharm和Visual Studio Code&#xff0c;确实有不足之处&#xff0c;但提供了众多功能丰富的插件&#xff0c;且最大优点就是相对于Pycharm和VSCODE&#xff0c;它体积小&#xff0c;启动速度快。对于Python的初学者来说&#…
阅读更多...
JavaScript基础总结---重点

JavaScript基础总结---重点

目录JavaScript简介什么是JavaScript浏览器执行JS过程JS的组成JS的引入方式函数与作用域arguments的使用全局变量与局部变量预解析对象创建对象的三种方式1.利用字面量创建对象2.利用 new Object 创建对象3.利用构造函数创建对象遍历对象属性变量、属性、函数、方法总结new关键…
阅读更多...
节点流和处理流详解

节点流和处理流详解

CSDN话题挑战赛第2期 参赛话题&#xff1a;学习笔记 1. 基本介绍 节点流可以从一个特定的数据源读写数据&#xff0c;如FileReader&#xff0c;FileWriter处理流&#xff08;也叫包装流&#xff09;是“连接”在已存在的流&#xff08;节点流或处理流&#xff09;之上&#x…
阅读更多...
web服务器项目常见面试题目（C++）

web服务器项目常见面试题目（C++）

项目介绍 1、为什么要做这样一个项目&#xff1f; 在学习CPP语言的时候&#xff0c;发现需要做一个项目来巩固一下&#xff0c;网上有推荐这个项目&#xff0c;然后就自己尝试做了一下。这个项目综合性比较强&#xff0c;从中既能学习Linux环境下的一些系统调用&#xff0c;也…
阅读更多...
Vue3创建项目（一）新手教程

Vue3创建项目（一）新手教程

✅作者简介&#xff1a; 我是痴心阿文&#xff0c;你们的学友哥。 整理一下Vue3创建项目&#xff0c;新手教程&#xff0c;看完需要预计花费10分钟。 1.环境准备 Vue依赖NodeJs的环境&#xff0c;需要先安装Nodejs。 2.NodeJs安装 打开NodeJs下载页选择自己系统对应的版本下载。…
阅读更多...
【JAVA】书店管理系统（附带前后端源码及资源）

【JAVA】书店管理系统（附带前后端源码及资源）

【JAVA_Web】书店管理系统&#xff08;附带前后端源码及资源&#xff09; 一、项目的目的和意义 1.1目的 在“互联网”的大趋势下&#xff0c;线上销售以其简单、便捷、高效的特点受到人们的青睐。网上书店不受时间或者空间的限制&#xff0c;只要在网络覆盖的地方人们就可以…
阅读更多...
vue3 动态加载组件、动态引入组件

vue3 动态加载组件、动态引入组件

1.问题 在做一个用vite构建的vue3项目时&#xff0c;动态拉取导入.vue页面&#xff0c;然后控制台一直有以下提示&#xff0c;页面也无法渲染出来。 2.分析 根据上面的报错提示&#xff0c;让我们安装并使用&#xff1a;rollup/plugin-dynamic-import-vars 这个插件&#xff0…
阅读更多...
JS遍历对象的七种方法

JS遍历对象的七种方法

我根据阮老师的《ES6标准入门》学习并总结了七种遍历对象的方法&#xff0c;我会将分别介绍这七种方法并进行详细的区分&#xff0c;并将从属性可枚举性问题与遍历方法两个大方面讲述全文&#xff0c;其中可枚举性是掌握遍历对象之前的的铺垫&#xff0c;请读者耐心学习&#x…
阅读更多...
【解决vscode终端输出中文乱码问题图文教程】

【解决vscode终端输出中文乱码问题图文教程】

全网最全解决vscode运行C/C终端输出乱码问题图文教程解决vscode终端输出中文乱码问题&#xff0c;强推**方法二**&#xff0c;少走几年弯路乱码原因方法一&#xff08;永久性&#xff09;方法二&#xff08;永久性&#xff09;强力推荐&#xff01;&#xff01;&#xff01;&am…
阅读更多...
Vue3中样式渗透:deep()为什么无效

Vue3中样式渗透:deep()为什么无效

今天学习 /deep/ 样式穿透&#xff0c;因为vue3中已经使用:deep()取代了/deep/ &#xff0c;所以直接用:deep()练习。 :deep()的使用场景&#xff1a; 如果给当前组件的style 节点添加了scoped 属性&#xff0c;则当前组件的样式对其子组件是不生效的。如果想让某些样式对子组…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023