介绍

在Vue中提供了一个内置组件：「slot」，官方称之为「插槽」。其作用主要是为了做内容分发。内容分发这个词理解起来可能不太直观，如果学习过Angular，就可以将它理解为Angular中的ng-content，ng-content的解释是「内容投影」，就将内容投影到组件的ng-content中。slot和它的作用是一样的。

如何使用

在官方中给出了通过插槽分发内容的例子。

首先定义一个组件，在组件模板中使用「slot」标记插槽在模板中的位置：

Vue.component('alert-box', {template: `Error!`
})

使用自定义组件：

Something bad happened.

其中， “Something bad happened.”作为内容被分发到自定义组件中的「slot」处，效果如下：

Error!Something bad happened.

这样我们就通过使用「slot」完成了内容分发。

应用场景

slot的应用场景有很多，如通过slot实现统一的布局、结构、效果等。在 Element UI中就有许多使用slot的组件。如表单中的FormItem：

在FormItem组件中，使用到了3个slot，从上而下它们的作用分别是：

• label内容分发

• 默认内容分发

• 错误内容分发

进阶

命名

在FormItem的例子中，发现在slot中使用到了name属性。name是用来命名插槽的。在模板中通过name来区分多个插槽。

要实现上面的效果，就可以使用具名插槽：

不带name属性的插槽，会带有隐含的名字“default”。使用如下：

Here might be a page title
A paragraph for the main content.
And another one.
Here's some contact info

渲染效果如下：

Here might be a page title
A paragraph for the main content.
And another one.

缩写

具名插槽的使用时的v-slot可以缩写为：

Here might be a page title
A paragraph for the main content.
And another one.
Here's some contact info

插槽 prop

在实际开发过程中，很多时候需要将组件内的数据通过slot的方式提供给外部使用，此时，就是通过slot属性的方式将数据传递到组件外：
current-user

{{ user.lastName }}

使用时：

{{ slotProps.user.firstName }}

只有默认插槽时，我们可以对上面的使用方式进行简化：

{{ slotProps.user.firstName }}

不带参数的slot默认为default，所以还可以简化为：

{{ slotProps.user.firstName }}

解构插槽prop

在ES中，提供了对象解构功能，所以我们也可以使用解构的方式来处理slot：

{{ user.firstName }}

此处可以理解为：

let { user } = slotProps

通过解构的方式，将slotProps的user属性提取出来。

总结

「slot」的内容分发功能，可以帮助开发者更加方便的实现布局结构组件化的复用。同样也是开发者进阶的一个标志。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！