vue作用域插槽（vue作用域插槽写法）

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

本文目录一览：

• 1、vue核心基础-插槽
• 2、大前端之vue插槽slot
• 3、vue插槽slot理解
• 4、vue 中slot 的具体用法

vue核心基础-插槽

1.1什么是插槽?

默认情况下使用子组件时在子组件中编写的元素是不会被渲染的

如果子组件中有部分内容是使用时才确定的, 那么我们就可以使用插槽

插槽就是在子组件中放一个"坑", 以后由父组件来"填"

1.2什么是匿名插槽

没有名字的插槽, 会利用使用时指定的能容替换整个插槽

2.1什么是具名插槽

默认情况下有多少个匿名插槽, 我们填充的数据就会被拷贝多少份

这导致了所有插槽凯返棚中填充的内容都是一样的

那么如果我们想给不同的插槽中填世脊充不同的内容怎么办呢?

这个时候就可以使用具名插槽

2.2具名插槽使用

通过插槽的name属性给插槽指定盯则名称

在使用时可以通过slot="name"方式, 指定当前内容用于替换哪一个插槽

3.1什么是v-slot指令?

v-slot指令是Vue2.6中用于替代slot属性的一个指令

在Vue2.6之前, 我们通过slot属性告诉Vue当前内容填充到哪一个具名插槽

从Vue2.6开始, 我们通过v-slot指令告诉Vue当前内容填充到哪一个具名插槽

4.1什么是作用域插槽

作用域插槽就是带数据的插槽, 就是让父组件在填充子组件插槽内容时也能使用子组件的数据

4.2如何使用作用域插槽

4.2.1在slot中通过 v-bind:数据名称="数据名称" 方式暴露数据

4.2.2在父组件中通过 template slot-scope="作用域名称" 接收数据

4.2.3在父组件的template/template中通过 作用域名称.数据名称 方式使用数据

在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。

它取代了 slot 和 slot-scope

也就是说我们除了可以通过v-slot指令告诉Vue内容要填充到哪一个具名插槽中

还可以通过v-slot指令告诉Vue如何接收作用域插槽暴露的数据

v-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作用域插槽和vue作用域插槽写法的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。