Vue中slot的使用（通俗易懂）

￡神魔★判官ぃ 2024-04-17 23:04 38阅读 0赞

# Vue中slot的使用（通俗易懂） #

**个人理解：**

是对组件的扩展，通过slot插槽向组件内部指定位置传递内容，通过slot可以父子传参；

**开发背景(slot出现时为了解决什么问题)：**

正常情况下,<Child><span style=”color:red;”>hello world</span></Child>在组件标签Child中的span标签会被组件模板template内容替换掉，当想让组件标签Child中内容传递给组件时需要使用slot插槽；

**Slot的通俗理解**

是“占坑”，在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板中<slot>位置），当插槽也就是坑<slot name=”mySlot”>有命名时，组件标签中使用属性slot=”mySlot”的元素就会替换该对应位置内容；

**Slot使用**

**1、组件中有单个或多个未命名slot标签时**，如下：

<Child><span style=”color:red;”>hello world</span></Child>

<template>

<div>

<slot></slot>

<slot style=”color:blue;” >这是在slot上添加了样式</slot>

<slot name=”mySlot”>这是拥有命名的slot的默认内容</slot>

</div>

</template>

会输出：两个红色的hello world，以及一个使用slot的默认内容

注意：在slot标签添加样式无效。拥有命名的插槽不能被不含slot属性的标签内容替换，会显示slot的默认值（具名slot具有对应性）；

**2、组件中有多个命名的slot****插槽时，可以实现父组件对子组件的指定位置显示内容或传参**，如下：

<Child>

<span slot="header">hello world</span>

<span slot="main">hello world</span>

<span slot="footer">hello world</span>

<span slot="other">\{ \{otherData\}\}</span>

</Child>

<template>

<div>

<slot name=”header”>这是拥有命名的slot的默认内容</slot>

<slot name=”main”>这是拥有命名的slot的默认内容</slot>

<slot name=”footer”>这是拥有命名的slot的默认内容</slot>

<slot name=”other”>这是拥有命名的slot的默认内容</slot>

</div>

</template>

**3、作用域插槽！！：**

使用时候子组件标签<Child>中要有<template scope=”scopeName”>标签，再通过scopeName.childProp就可以调用子组件模板中的childProp绑定的数据，所以作用域插槽是一种子传父传参的方式，解决了普通slot在parent中无法访问child数据的去问题；

作用域插槽代表性的用例是列表组件，允许在parent父组件上对列表项进行自定义显示，如下该items的所有列表项都可以通过slot定义后传递给父组件使用，也就是说数据是相同的，不同的场景页面可以有不同的展示方式：

<ul>

<slot name="item" v-for="item in items" :text="item.text" :myname="item.myname" >

slot的默认内容

</slot>

</ul>

<Child>

<template slot="item" scope="props">

<li>\{ \{props.myname\}\}</li>

</template>

</Child>

发表评论取消回复

表情：

评论列表（有 0 条评论，38人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue中slot的使用（通俗易懂）

Vue中slot的使用（通俗易懂） **个人理解：** 是对组件的扩展，通过slot插槽向组件内部指定位置传递内容，通过slot可以父子传参； **开发背景(sl...

￡神魔★判官ぃ/ 2024年04月17日 23:04/ 0 赞/ 39 阅读

相关通俗易懂vue笔记

1. Promise\\ 对象 \\ 用于表示一个异步操作\\的最终完成 (或失败)及其结果值。 1. 是一个构造函数,异步编程的一种解决方案 2. 通过其所带函数t

女爷i/ 2023年09月29日 11:36/ 0 赞/ 17 阅读

相关 HTTPS通俗易懂

[https://www.wosign.com/News/httpsjiami\_20180817.htm][https_www.wosign.com_News_httpsji

r囧r小猫/ 2023年07月10日 12:52/ 0 赞/ 18 阅读

相关 vue中 slot 的使用总结

vue中slot的使用总结 slot是Vue中的插槽，首先它是使用在子组件中的 Vue的slot插槽，简单理解就是，在子组件内占坑，在父组件里填坑。 slot一

àì夳堔傛蜴生んèń/ 2022年12月11日 11:29/ 0 赞/ 129 阅读

相关数据库使用技巧（通俗易懂）

一：选择最有效率的表名顺序 oracle的解析器按照从右到左的顺序处理form字句中的表名，from子句中写在最后的表（基础表）将会最先处理，在from子句中包含多个表的情况

超、凢脫俗/ 2022年06月08日 10:28/ 0 赞/ 156 阅读

相关通俗易懂分布式

借鉴。原文请[点击这里][Link 1]。 — 分布式不是单单几句java代码就能建立的。如果一定要用java来理解，那java里面的多线程可以理解成一个分布式，他把用户请

迷南。/ 2022年04月25日 04:18/ 0 赞/ 355 阅读

相关通俗易懂的设计模式

通俗易懂的设计模式零、使用 1、安装 2、测试

旧城等待，/ 2022年04月03日 08:12/ 0 赞/ 271 阅读

相关 Vue中的v-slot如何使用

今天看了看Vue的文档，发现了v-slot这个指令，生怕掉队的我赶紧补习了一下直接上代码！！！ //父组件 <template> <!--

悠悠/ 2022年02月13日 03:57/ 0 赞/ 235 阅读

相关 Vue中slot的使用（通俗易懂）

个人理解：是对组件的扩展，通过slot插槽向组件内部指定位置传递内容，通过slot可以父子传参；开发背景(slot出现时为了解决什么问题)：正常情况下,

今天药忘吃喽~/ 2021年09月15日 12:40/ 0 赞/ 366 阅读

相关通俗易懂的理解Java中的ArrayList！

庆哥：今天给大家请到的是我们的ArrayList，相信今天的对话结束之后，大家对ArrayList就不会那么陌生了，好了，先请我们的ArrayList给大家做下自我介绍吧！

拼搏现实的明天。/ 2021年09月07日 11:52/ 0 赞/ 412 阅读