slotvue（slotvue用法及原理）

本篇文章给大家谈谈slotvue，以及slotvue用法及原理对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、大前端之vue插槽slot
• 2、vue插槽slot理解
• 3、vue 中slot 的具体用法
• 4、Vue组件化开发（三）——slot插槽的使用

大前端之vue插槽slot

什么是插槽？

在vue中通过slot可以向组件中指定位置插入内容。

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

首先是单个插槽，单个插槽是核哪vue的官方叫法，但是其实也可以叫它默认插槽，或者与具名插槽相对，我们可以叫它匿名插槽。因为它不用设置name属性。

单个插槽可以放在组件任意位置， 但是一个组件有且只能有一个单个插槽 ，相对应的，具名插槽就可以有很多个。

匿名插槽没有name属性，所以是匿名插槽，那么，插槽加了name属性，就变成了具名插槽。具名插槽可以在一个组件中出现N次，出现在不同的位置。下面的例子，就是一个有两个具名插槽和单个插槽的组件，这三个插槽被父组件用同一套css样式显示了出来，不同的是内容上略有区改败码别。

匿名插槽和具名插槽都是在父组件中定义内容与样式，子组件只是负责放在哪。但是如果子组件提供数据，那这样的话需要子组件的slot把数据传递给父组件，父组件只需要提供样式即可。

在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在 文档中 的 attribute。

[img]

vue插槽slot理解

vue的插槽用法，官方文档写的内容个人感觉有点乱，不自己梳理一下的话，使用的时候也容易懵逼，下面是我对vue插槽使用的理解：

slot概念源于web components规范草案（地址： ）

vue官网关于插槽的文档中，第一句话即说明了vue的slot插槽设计源于web components，具体内容可以自行了解，这里只说vue框架下slot的用法。

概念： slot可将 父组件 在 子组件标签里 写的 content 渲染到子组件 对应 的地方

先说通用性用法，再说特殊情况会让人比较容易接受。这里以最具通用性的写法，以 具名插槽 的写法为例子展开

父组件中：

子组件中

渲染结果:

父组件template标签上的v-slot指令与子组件的slot标签的name属性，通过绑定一样悉者物的值，形成一一对应的关系。

父组件中:

子组件中:

注意，上述例子中，都有v-slot绑定default属性的情况，这里需要说明下，vue中的插槽用法，default属性的模板和插槽存在特殊的对应情况，而比较容易混乱的点就在这里，这也是vue官网插槽文档让人看得很蒙圈的地方，因为官网并没有给我们分区域的讲述通用情况和特殊情况，而是穿插着讲，让人容易理不清楚关系。

子组件的slot标签中的值可以写入内容，这部分内容会在没有对应的模板内容的时候，作为默认值展示

父组件

子组件

渲染结果

具名插槽的写法具备通用性，学会了具名插槽写法，那么插槽的用法已经能够掌握8成了。下面将展开的是插槽中的特殊对应关系

------------ 默认的default模板和插槽 -----------

父组件

子组件情形1

子组件情形2

渲染结果都是

由于两种情形中都没有name属性是test的插槽，所以渲染结果中没有出现test模板里的内容。

上述例子中涵盖了2个知识点，首先通过子组件情形2能得到渲染结果，可以得出一个结论：

default模板的内容必定会渲染到defalut插槽中，所以，通过子组件情形1能得出渲染结果，也可以得出一个结论：

最后还需要注意，模板和插槽的对应关系是1对多的关系。即同名模板只能有一个，但是同名插槽可以有无数个，会同时渲染

以上内容涵盖了9成的插槽用法，足以满足日常使用。下面将要对插槽作用域问题展开讲解

很简单

1.模板内容一般都是在父组件，所以模板内容的作用域自然是父组件的作用域，父组件的动态内容基本上取自父组件的变量或函数，但是有特殊情况可以读取到子组件传出来的值，第3点会讲。

2.同理，插槽一般都是在子组件，所以作用域自然在子组件，比如子组件插槽中放入了动态内容作为默认值，该动态内容必定取值于子组件的变量，也只能读取到子组件的变量和函数

3.特殊情况，父组件可以用子组件传出来的值，这个时嫌谨候会有写法上的变化：

子组件

父组件正常调用

父组件解构对象调用

渲染结果

v-slot指令可以变成缩写的写法，类似v-bind缩写为：，v-on缩写为@，v-slot可以缩写为#

例如

等价于

这里出现了v-slot指令直接绑定在子组件标签名上的情况，使用场景是，当前模板只有一个default模板，并且需要获取子组件传来的值时，才能这样使用。

不接受传值的情况，会报错

非default模板，也会报错

子组件

父组件

除了default模板外，还存在其他模板时，也会报错

以上基本总结了插槽的所有用法，其中第5点和第8点的特殊情况都是睁液针对default模板的，这一点一定要分清楚。

还有1点很关键的知识，即default模板和插槽不算是具名模板和插槽，第8点的非default模板会报错的原因，即该特殊情况不支持具名模板和插槽。但是default模板和插槽在平时写的时候可以用具名模板和插槽的写法，也可以用省略的写法，即第5点描述的情况。

vue 中slot 的具体用法

子组件

父组件

这种情况是如果要父组件在子组件中插入内容 ，必须要在子组件中声明slot 标签 ，如果子组件模板不包含slot插口，父组件的内容p{{msg}}/p将会被丢弃。

当slot存在默认值slotp默认值/p/slot，且父元素在slotshow/slotshow芹竖渣中没有要插入的内容时，会显示p默认值/p（p标签会去掉），当slot存在默认值，且父元素在child中存在要插入的内容时，则显示父组件中设置的值，

具名slot

slot 元素可以用一个特殊的属性 name 来配置如何分发内容。多个 slot 可以有不同的名字。具名 slot 将匹配内容片段中有对应 slot 特性的元素

p slot="my-body"插入slot name="my-body"中，p我是其他内容/p插入slot中，而p slot="my-footer"被丢弃

如果没有默认的 slot，这些找不到匹配的内容纤皮片段也将被抛弃嫌悄

p我是其他内容/p和p slot="my-footer"都被抛弃

作用域插槽

作用域插槽是一种特殊类型的插槽，用作使用一个 (能够传递数据到) 可重用模板替换已渲染元素。

在子组件中，只需将数据传递到插槽，就像将 props 传递给组件一样

在父级中，具有特殊属性 scope 的 template 元素必须存在，表示它是作用域插槽的模板。scope 的值对应一个临时变量名，此变量接收从子组件中传递的 props 对象.

如果渲染以上结果，得到的输出是

【列表组件】

作用域插槽更具代表性的用例是列表组件，允许组件自定义应该如何渲染列表每一项

Vue组件化开发（三）——slot插槽的使用

相信有过项目开发经验的小伙伴一定知道，在项目中往往会有多个地方需要用到样式相似，细节略有差异的组件，比如说导航栏和搜索栏，这些组件出现频率比较高，但是在不同的场景下我们对于导航栏的内容有着不同的需要。而如果为了这点细微的区别再专门写一个组件会十分麻烦，而且复用性也很低。

可能有些读者会觉得，这不难解决，对于子组件中不确定的地方我们可以交由父组件的props传值来进行解决，比如导航栏中的标题，我们可以都交由父组件传值来实现。（比如下面的导航栏1和导航栏2）

不错，当组件的变化程度不大时，这确实可以十分方便地解决组件复用的问题。但如果说我想要实现根据不同的场景，导航栏中部的位置可能是标题，也有可能是下拉框，是搜索框或者是其他自定义的组件呢？此时我们就很难单纯通过 props 来拓展我们的组件灵活性了。（比如下面的导航栏1和导航栏3）

在子组件中，使用特殊的元素slot就可以为子组件开启一个插槽。该插槽插入什么内容取决于父组件如何使用。我们可以看一下下面这个案例：

我们一共在Vue实例中使用了2次子组件，第一次父组件没有往子组件中传递元素，第二次父组件有往子组件传递元素。

从结果上看，当父组件没有往子组件插槽中添加元素时，则会展示插槽中默认的内容，而如果父组件有传递插槽内容，则会覆盖插槽的默认内容，而后进行显示。

在第二小节中，我们已经知道了插槽的基雀顷本使用，但是当子组件的功能比较复杂时，我们可能就要在组件中定义多个插槽，来满足更加灵活的业务需要。比如上面举例的京东导航栏，这个组件内部可以拆分为三个插槽，分别对应 左 、 右 、 中 三个位置的内容。顷码陆

但想要在组件内预留多个插槽有个前提条件，就是我们必须要让每个插槽都有其对应的唯一标识，这样父组件传递内容的时候，才能识别出来哪模搭些内容对应哪个插槽。

我们可以看一下下面这个案例：

子组件内定义了三个具名插槽，我们在父组件中进行子组件的调用，需要注意的是我们并没有完全按照顺序去传递对应插槽的内容。但实际上从演示结果中我们可以发现， 无论父组件传递的插槽内容顺序如何，最终解析的时候都会将传入的插槽内容根据 slot name 进行正确的渲染的 。

在讲解作用域插槽之前，我们需要先对 编译作用域 进行理解。具体表现在 父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。

我们可以通过下面这个案例来理解这个规则：

父组件和子组件都使用了 isShow 来控制组件的显示，同时在父子组件的data中，又都有同名的变量 isShow 。我们从结果中可以看到，定义在在父组件中子组件，其组件是否可见取决于父组件data中的变量值。而在子组件template中定义的 isShow 标识，则受子组件自身data变量的约束，也就是说此处子组件模板的变量取的是子级作用域中的变量值。

在上一小节的演示中，我们已经可以了解到编译作用域的概念，也知道了父组件无法直接使用子组件内部的数据（因为子组件模板内部的数据是在子组件的作用域中的）。但 有些场景下，我们又会需要父组件可以替换插槽的标签，但是内容由子组件来提供。 那么，此时我们就可以使用作用域插槽来解决这个问题。

我们可以来看一下下面这个案例：子组件中存在一个数组，现在我们想要通过插槽的方式，来根据不同的需要实现数组的展示方式：

在父组件中，我们定义了2种展示数据的方式，一种为展示为列表形式，还有一种是每种语言以 -- 进行分割。在使用上，子组件需要在插槽处通过 :data 的方式提供对外暴露的数据，父组件在使用的时候，则是先在子组件内部定义 template 标签，从 slot-scope 属性中取出slotProps参数（其实slotProps就是一个对象，里面封装着所有子组件插槽对外暴露的数据）。

我们通过 slotProps.data 就可以获取到我们在子组件插槽中封装的data数据啦

至此，有关插槽的内容就到此结束啦，作用域插槽多见于常见的组件库中（比较多是在table组件中出现），所以最好要熟悉插槽的原理和使用，这样可以更好地简化我们的开发工作

关于slotvue和slotvue用法及原理的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。