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

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

1

slot基本使用

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

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

我是组件模板

默认按钮

    

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

我是P标签

我是P标签

我是span标签 我是i标签     

显示效果：

可以看出：

1. 可直接在模板中使用一组标签进行插槽的添加；

2. 若slot标签中添加了内容，但DOM使用组件标签未填充元素，slot标签中的内容会作为默认值显示。

3. DOM中组件标签中填充的内容，无论一个或多个，都会替换slot标签默认值，一起作为替换元素。

2

具名插槽

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

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。   

3

编译作用域

    组件都有自己的编译作用域，比如在子组件中定义的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}}      

END Vue之路系列文章： Vue之路 | 07-Vue组件化实现和使用 Vue之路 | 06-表单绑定v-model Vue之路 | 05-v-on、v-if、v-for Vue之路 | 04-计算属性computed Vue之路 | 03-插值操作与V-bind Vue之路 | 02-VSCODE添加Vue模板 Vue之路 | 01-Vue安装与初体验

微信：熊吱

扫码关注我们

互联网知识交流平台

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