vue slot插槽_Vue之路 | 08vue插槽slot使用

点击左上方“熊吱”关注我们吧！在Vue组件的使用过程中，常常会遇到组件大体框架相同，但是部分内容在不同页面上显示需求不同的情况，此时就可以使用插槽，类似于在组件中挖一个坑，可以进行组件模板的替换。

slot基本使用

插槽功能通过标签：来实现。

首先我们实现一个template，其中使用slot标签添加了一个插槽，插槽中放置了一个按钮标签，当组件标签中未添加内容时，就会默认显示按钮标签。

`我是组件模板`

默认按钮

接着在DOM中对组件标签使用：

我是P标签

我是span标签我是i标签

显示效果：

可以看出：

可直接在模板中使用一组标签进行插槽的添加；
若slot标签中添加了内容，但DOM使用组件标签未填充元素，slot标签中的内容会作为默认值显示。
DOM中组件标签中填充的内容，无论一个或多个，都会替换slot标签默认值，一起作为替换元素。

具名插槽

有时我们使用组件时需要多个插槽，就需要区分开每个插槽。

slot标签可以通过name属性给每个插槽命名：

左边中间右边

上述代码中，定义了left、right两个具名插槽，中间还有一个无名插槽，无名插槽有一个默认的名字：default。

在DOM中给插槽提供内容时，需要在元素上使用v-slot指令，并且在v-slot后跟上插槽的名称：

                       left插槽                  默认插槽                  right插槽

没有被template包裹的内容会传入到无名插槽中。

注：v-slot指令只能添加在标签上(除了独占默认插槽的缩写语法，见3.1节)。

2.1 v-slot语法糖

v-slot:可以使用语法糖#来替换，例如v-slot:right可以写为#right。

编译作用域

组件都有自己的编译作用域，比如在子组件中定义的data内容，在父组件中是不能访问的。但是在使用插槽的时候，有时往往需要替换的插槽内容能够访问子组件的数据，就会用到插槽Props。

下列代码中，子组件的data定义了一个user对象，其中包含firstname与lastname的值，为了在父组件中能访问到user，我们就将user作为slot元素的一个attribute，通过v-bind绑定在slot标签上，此时被绑定的user就叫做插槽Props。

子组件的template如下：

{{user.lastname}}

然后在父级作用域中，使用v-slot来定义插槽Props的名字，这里使用的名称为slotProps，名称可以自定义，然后就可以在Mustache语法中使用插槽名称.插槽Props.属性来访问子组件的数据：

                        {{slotProps.user.firstname}}

3.1 独占默认插槽的缩写语法

在第二节最后说到v-slot只能绑定在template上，而下面这种情况就是唯一的例外：当被提供的内容只有默认插槽(除了默认插槽不能再含有具名插槽或多个插槽)时，组件的标签才可以被当做插槽的模板来使用，有以下两种写法：

                      {{slotProps.user.firstname}}                             {{slotProps.user.firstname}}

微信：熊吱

扫码关注我们

互联网知识交流平台

你的每个赞和在看，我都喜欢！