Vue系列之插槽（slot）详解

news2025/2/28 6:16:41

文章の目录

  • 1、什么是插槽了
  • 2、插槽的分类
  • 3、默认插槽的使用
    • 3.1、语法
    • 3.2、示例
  • 4、具名插槽的使用
    • 4.1、什么是具名插槽
    • 4.2、语法
    • 4.3、示例
    • 4.4、缩写
  • 5、作用域插槽的使用
    • 5.1、什么是作用域插槽了
    • 5.2、语法
    • 5.3、示例
  • 6、动态插槽名
    • 6.1、什么是动态插槽名
    • 6.2、示例
  • 写在最后

Vue 版本：2.6.11，过期的API就不在这里进行赘述了。

1、什么是插槽了

插槽（Slot）是 Vue 提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制

2、插槽的分类

插槽有三种：默认插槽、具名插槽、作用域插槽。

3、默认插槽的使用

3.1、语法

<slot></slot>

3.2、示例

在子组件中定义了一个默认插槽：

<template>
  <div class="about">
    <h1>This is an Children page</h1>
    <!-- 定义一个默认插槽 -->
    <slot></slot>
  </div>
</template>

在开发中我们经常使用到组件之间的传值，但很多情况涉及到的都是数据属性的传值，现在如果是这种情况：

<template>
  <div class="about">
    <h1>This is an Parent page</h1>
    <children>
      <!-- 一个p标签的dom结构 -->
      <p>子组件标签之间</p>
    </children>
  </div>
</template>

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

如果子组件中没有使用插槽的情况下：

<template>
  <div class="about">
    <h1>This is an Children page</h1>
  </div>
</template>

浏览器中的页面，父组件中的p标签的内容是不会还给子组件的。
在这里插入图片描述
这时候，想让父组件定义的p标签传给子组件并显示，可以在子组件中定义一个默认插槽

<template>
  <div class="about">
    <h1>This is an Children page</h1>
    <!-- 定义一个默认插槽 -->
    <slot></slot>
  </div>
</template>

在这里插入图片描述
在子组件中，你可以定义多个默认插槽，并在子组件中决定这些默认插槽的位置，父组件要插入的内容，都会被填充到这些默认的插槽中：

<template>
  <div class="about">
    <h1>This is an Children page</h1>
    <!-- 定义一个默认插槽 -->
    <slot></slot>
    <slot></slot>
  </div>
</template>

在这里插入图片描述
当然，父组件定义要插入到子组件插槽的内容，并不一定是dom结构类型，也可以是一个组件，也可以是普通的数据结构，只要子组件有定义插槽，就会把内容填充进去。

4、具名插槽的使用

4.1、什么是具名插槽

其实就是在子组件中定义插槽时，给对应的插槽分别起个名字，方便后边插入父组件将根据name来填充对应的内容。

4.2、语法

<slot name="名称"></slot>

4.3、示例

在子组件中，定义两个具名插槽：

<template>
  <div class="about">
    <h1>This is an Children page</h1>
    <!-- 给插槽加了个name属性，就是所谓的具名插槽了 -->
    <slot name="one"></slot>
    <slot name="two"></slot>
  </div>
</template>

父组件中：

为了验证，子组件中的插槽可以填充任何结构的内容，所以我这边专门在one插槽中插入一个组件，而在two插槽就单纯插入一串普通的数据。

<template>
  <div class="about">
    <h1>This is an Parent page</h1>
    <children>
      <template slot="one">
        <p>one插槽</p>
      </template>
      <template  slot="two">
        two插槽
      </template>
    </children>
  </div>
</template>
// 上面这个是 2.6.0 之前的语法，下面这个是  2.6.0 之后的语法。
或
<template>
  <div class="about">
    <h1>This is an Parent page</h1>
    <children>
      <template v-slot:one>
        <p>one插槽</p>
      </template>
      <template v-slot:two>
        two插槽
      </template>
    </children>
  </div>
</template>

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

页面结果：

在这里插入图片描述
当然，子组件可以定义多个同名的具名插槽：

<template>
  <div class="about">
    <h1>This is an Children page</h1>
    <!-- 给插槽加了个name属性，就是所谓的具名插槽了 -->
    <slot name="one"></slot>
    <slot name="two"></slot>
    <slot name="two"></slot>
  </div>
</template>

在这里插入图片描述

4.4、缩写

把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header。

    <children>
        <template #[dynamicSlotName]="slotProps">
          <h2>{{slotProps.obj.name}}</h2>
        </template>
    </children>

然而，和其它指令一样，该缩写只在其有参数的时候才可用。这意味着以下语法是无效的：

    <children>
        <template #="slotProps">
          <h2>{{slotProps.obj.name}}</h2>
        </template>
    </children>

如果你希望使用缩写的话，你必须始终以明确插槽名取而代之：

    <children>
        <template #default="slotProps">
          <h2>{{slotProps.obj.name}}</h2>
        </template>
    </children>

5、作用域插槽的使用

5.1、什么是作用域插槽了

作用域插槽就是实现在子组件自行决定自己要显示什么内容

5.2、语法

<slot :自定义的name=data中的属性或对象></slot>

5.3、示例

子组件：

<template>
  <div class="about">
    <h1>This is an Children page</h1>
    <!-- 子组件中，告诉父组件我要实现obj里面的信息 -->
    <slot :obj="obj"></slot>
  </div>
</template>

<script>
export default {
  data () {
    return {
      obj: {
        name: 'children'
      }
    }
  }
}
</script>

父组件：

这种时候有一种情况需要注意：

如果子组件中只有一个作用域插槽且为默认插槽时，父组件可以使用下边这种简单的写法，当然规范点还是加在template模板标签好点：

<template>
  <div class="about">
    <h1>This is an Parent page</h1>
    <children v-slot="slotProps">
        <p>one插槽{{slotProps.obj.name}}</p>
    </children>
  </div>
</template>

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

页面效果：
在这里插入图片描述
但是当子组件中有多个作用域插槽时，不建议上边这种简单的写法，因为可能会出现作用域不明确的问题。

子组件有多个作用域插槽时：

<template>
  <div class="about">
    <h1>This is an Children page</h1>
    <slot :obj1="obj1" name="one"></slot>
    <slot :obj2="obj2" name="two"></slot>
  </div>
</template>

<script>
export default {
  data () {
    return {
      obj1: {
        name: 'one slot'
      },
      obj2: {
        name: 'two slot'
      }
    }
  }
}
</script>

父组件使用这种规范的写法，可以避免有时作用域不明确问题：

<template>
  <div class="about">
    <h1>This is an Parent page</h1>
    <children>
        <template v-slot:one="slotProps">
          <h2>{{slotProps.obj1.name}}</h2>
        </template>
        <template v-slot:two="twoSlotProps">
          <h2>{{twoSlotProps.obj2.name}}</h2>
        </template>
    </children>
  </div>
</template>

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

页面效果：

在这里插入图片描述

6、动态插槽名

6.1、什么是动态插槽名

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

6.2、示例

子组件：

<template>
  <div class="about">
    <h1>This is an Children page</h1>
    <slot :obj="obj1" name="one"></slot>
    <slot :obj="obj2" name="two"></slot>
  </div>
</template>

<script>
export default {
  data () {
    return {
      obj1: {
        name: 'one slot'
      },
      obj2: {
        name: 'two slot'
      }
    }
  }
}
</script>

父组件：

<template>
  <div class="about">
    <h1>This is an Parent page</h1>
    <children>
        <template v-slot:[dynamicSlotName]="slotProps">
          <h2>{{slotProps.obj.name}}</h2>
        </template>
    </children>
  </div>
</template>

<script>
import Children from './Children.vue'
export default {
  components: {
    Children
  },
  data () {
    return {
      dynamicSlotName: 'one'
    }
  }
}
</script>

显示效果：

在这里插入图片描述

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！

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

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

相关文章

Node.js | 从前端到全栈的必经之路

Node.js | 从前端到全栈的必经之路

&#x1f9d1;‍&#x1f4bc; 个人简介&#xff1a;即将大三的学生&#xff0c;一个不甘平庸的平凡人&#x1f36c; &#x1f5a5;️ NodeJS专栏&#xff1a;Node.js从入门到精通 &#x1f5a5;️ 博主的前端之路&#xff1a;前端之行&#xff0c;任重道远&#xff08;来自大三…
阅读更多...
在uni-app中使用手机号一键登录

在uni-app中使用手机号一键登录

1、首先需要在dcloud开发者控制台开通一键登录 https://dev.dcloud.net.cn/uniLogin 开通一键登录服务, 获取关键最关键的两个参数 ApiKey 和 ApiSecret 真机调试无需添加应用&#xff0c;如需打包使用请添加。一键登录应用ID为离线打包时配置的appid 2、登录云服务空间&#x…
阅读更多...
HTML零基础入门教程（详细）

HTML零基础入门教程（详细）

首先我们先介绍一下网页&#xff1a; 网页时构成网站的基本元素&#xff0c;它通常由图片&#xff0c;链接&#xff0c;文字&#xff0c;声音&#xff0c;视频等元素组成。通常我们看到的网页&#xff0c;常见以.htm或.html后缀结尾的文件&#xff0c;因此我们把它俗称为HTML文…
阅读更多...
webpack看这一篇就够了

webpack看这一篇就够了

文章目录今日学习目标1. webpack基本概念webpack能做什么2. webpack的基本使用2.0 创建项目2.1 解决多次引入资源文件2.2 webpack使用2.3_webpack 更新打包3. webpack的配置3.0_webpack-入口和出口3.1_打包流程图3.2_插件-自动生成html文件3.3_mode模式3.3_webpack开发服务器-为…
阅读更多...
微信小程序转uniapp的迁移步骤及遇到的问题

微信小程序转uniapp的迁移步骤及遇到的问题

目录 前言 一、迁移步骤 第一步：安装miniprogram-to-uniapp 插件 第二步：查看是否安装成功 第三步：使用插件进行转换
阅读更多...
vue实现input输入模糊查询(三种方式)

vue实现input输入模糊查询(三种方式)

vue实现input输入模糊查询(三种方式) 目录 vue实现input输入模糊查询(三种方式) 1 计算属性实现模糊查询 演示&#xff1a; 2 watch 监听实现模糊查询 3 通过按钮点击实现模糊查询 演示&#xff1a; 1 计算属性实现模糊查询 vue 中通过计算属性实现模糊查询,创建 html …
阅读更多...
微信小程序面试题大全（持续更新）

微信小程序面试题大全（持续更新）

1.请谈谈微信小程序主要目录和文件的作用&#xff1f; project.config.json&#xff1a;项目配置文件&#xff0c;用的最多的就是配置是否开启https校验App.js&#xff1a;设置一些全局的基础数据等App.json&#xff1a;底部tab&#xff0c;标题栏和路由等设置App.wxss&#x…
阅读更多...
呕心沥血 JavaScript知识点梳理大全，超详细 建议收藏！！！

呕心沥血 JavaScript知识点梳理大全，超详细 建议收藏！！！

呕心沥血 JavaScript知识点梳理大全&#xff0c;超详细 建议收藏&#xff01;&#xff01;&#xff01; ✴️大家好,我是王同学&#xff0c;爆肝三天三夜王同学把JavaScript 知识点梳理了一遍&#xff0c;文章没有一点套路&#xff0c;只有满满的干货 ✴️如果对你有帮助就给我…
阅读更多...
vite.config.js配置-解决跨域问题，以及@vitejs/plugin-vue等报错

vite.config.js配置-解决跨域问题，以及@vitejs/plugin-vue等报错

开发环境 在配置的过程中踩了很多坑&#xff0c;还是太菜&#xff0c;有些东西弄不明白什么意思。 运行项目时的报错可直接到最下面看vite.config.js文件的注释 目前项目用到的模块并不多&#xff0c;package.json文件如下 {"name": "PsWebV3Abb",&quo…
阅读更多...
Vue vue.config.js 的详解与配置

Vue vue.config.js 的详解与配置

Vue vue.config.js 的详解与配置 1. 为什么要配置 vue.config.js 由于 vue-cli 3 也学习了 rollup 的零配置思路&#xff0c;所以项目初始化后&#xff0c;没有了以前熟悉的 build 目录&#xff0c;也就没有了 webpack.base.config.js、webpack.dev.config.js 、webpack.prod…
阅读更多...
HTML中的表格和表单（含有示例代码）

HTML中的表格和表单（含有示例代码）

表格表格的基本构成标签 table标签&#xff1a;表格标签 caption标签&#xff1a;表格标题tr标签&#xff1a;表格中的行 th标签:表格的表头 td标签&#xff1a;表格单元格表格的基本结构 <table>定义表格 <caption>表格标题</caption><tr>定义表行 &l…
阅读更多...
vue3 + vite 性能优化 ( 从5s -＞ 0.5s )

vue3 + vite 性能优化 ( 从5s -＞ 0.5s )

Ⅰ、Vue Vite 构建项目性能优化 vite 相比于 webpack 优势显著&#xff1b;然而 社区&#xff0c;却 不够成熟 &#xff0c;参考资料较少&#xff1b;如何让vue vite 构建项目变的 访问秒开 &#xff08;要想足够快&#xff0c;就是让首次加载足够小&#xff09;&#xff0c…
阅读更多...
安装nvm，并使用nvm安装nodejs及配置环境变量

安装nvm，并使用nvm安装nodejs及配置环境变量

一、安装nvm 1.下载nvm 解压后点击exe文件进行安装&#xff1a; 2、点击下一步安装到 D:\NVM 下 3、先在D:\NVM 下创建nodejs文件夹&#xff0c;然后将路径设置如下&#xff1a; 4、点击next 一直点击 完成安装&#xff1b; 5、找到指定nvm打开后&#xff1a; 给该文件添加这…
阅读更多...
关于 Token 过期问题的两种解决方案

关于 Token 过期问题的两种解决方案

对于token过期&#xff0c;我们有两种方案&#xff1a; 方案一&#xff1a;当我们操作某个需要token作为请求头的接口时&#xff0c;返回的数据错误error.response.status 401&#xff0c;说明我们的token已经过期了。 我们希望当响应返回的数据是401身份过期时&#xff0c;让…
阅读更多...
【学Vue就跟玩一样】如何使用vue中的消息订阅与发布，如何使用vue实现动画效果

【学Vue就跟玩一样】如何使用vue中的消息订阅与发布，如何使用vue实现动画效果

一&#xff0c;消息订阅与发布1.什么是消息订阅与发布消息订阅与发布是一种组件间通信的方式&#xff0c;适用于任意组件间通信。能更好的实现组件间通信&#xff08;消息订阅与发布就像是送报员一样。好比小a向报社订阅了一份报纸&#xff0c;然后在报社留下了自己的信息&…
阅读更多...
Web 开发与搜索引擎优化，你应该选择哪一个？

Web 开发与搜索引擎优化，你应该选择哪一个？

&#x1f482; 个人网站:【海拥】【摸鱼游戏】【神级源码资源网站】&#x1f91f; 前端学习课程&#xff1a;&#x1f449;【28个案例趣学前端】【400个JS面试题】&#x1f485; 想寻找共同学习交流、摸鱼划水的小伙伴&#xff0c;请点击【摸鱼学习交流群】** 目录什么是搜索引…
阅读更多...
什么是BFC，他有什么用？

什么是BFC，他有什么用？

1、什么是BFC BFC - Block Formatting Context 块级格式化上下文 BFC的定义&#xff0c;在官方文档到中是这么介绍的&#xff1a;一个BFC区域包含创建该上下文元素的所有子元素&#xff0c;但是不包括创建了新的BFC的子元素的内部元素&#xff0c;BFC是一块块独立的渲染区域&a…
阅读更多...
【Three.js基础】创建场景、渲染场景、创建轨道控制器（一）

【Three.js基础】创建场景、渲染场景、创建轨道控制器（一）

&#x1f431; 个人主页&#xff1a;不叫猫先生 &#x1f64b;‍♂️ 作者简介&#xff1a;前端领域新星创作者、阿里云专家博主&#xff0c;专注于前端各领域技术&#xff0c;共同学习共同进步&#xff0c;一起加油呀&#xff01; &#x1f4ab;系列专栏&#xff1a;vue3从入门…
阅读更多...
Web服务器配置管理

Web服务器配置管理

作者&#xff1a;敲代码の流川枫 博客主页&#xff1a;流川枫的博客 专栏&#xff1a;和我一起学java 语录&#xff1a;Stay hungry stay foolish 工欲善其事必先利其器&#xff0c;给大家介绍一款超牛的斩获大厂offer利器——牛客网 点击免费注册和我一起刷题吧 文章目录…
阅读更多...
CSS，HTML，JS 以及Vue前端面试题八股文总结【看完你就变高手】

CSS，HTML，JS 以及Vue前端面试题八股文总结【看完你就变高手】

■ 符号说明&#x1f498; 主题&#x1f31f; 常见重要&#x1f31b; 需要有印象的&#x1f195; v3新特性■ 杂谈&#x1f31b; SEO优化合理的title、description、keywords&#xff1a;搜索对着三项的权重逐个减小&#xff0c;title值强调重点即可&#xff1b;description把页…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023