Vue 组件入门（十二）具名插槽
前言
之前的章节我们介绍过，如果想给子组件传递模板片段，并让其在子组件中进行渲染，可以通过插槽来实现。也就是在子组件中想插入父组件模板代码的位置上添加 slot 标签即可。
而通过使用插槽，可以让我们更好的复用组件，并可以使其的 ui 保持一致，不仅提高了组件的灵活性，还使得内容的更加的自定义化。
而随着业务的不断复杂化，对于子组件的要求也可能变得更高。在一个组件中，对于插槽的使用可能需要在其多个位置中插入父组件的模板片段。而对于这种情况，我们完全就可以通过具名插槽的形式，使其模板片段插入到指定位置。
那我们要如何使用他呢？让我们来具体看一看吧。
具名插槽
比如我们有一个 layout 组件，我们想分别在其头部、主体以及底部插入相同的内容。
复制代码
我们可以在每个位置插入 slot 标签，并给每个 slot 一个 name 属性，用以作为相应插槽的 Id，来让我们更好的插入要渲染的内容，也就是我们开头说的具名插槽。
复制代码
要想正确的使用具名插槽的话，还需要使用 template 标签，并在上面添加 v-slot 指令以及指令绑定的具名插槽的名词。
复制代码
当然，我们也可以使用 v-slot 的简写形式：#，所以可以写成这样：
复制代码
下面，我们完成全部代码：
复制代码
而最终渲染出来的 HTML 效果，将是如下样子：
复制代码
需要注意的是，当父组件传递的模板片段没有指定具名插槽的话，会默认插入到，没有绑定 name 的 slot 标签上。
版权声明: 本文为 InfoQ 作者【Augus】的原创文章。
原文链接:【http://xie.infoq.cn/article/a1406247f3d8258ceaf2a12ab】。文章转载请联系作者。
爱瞎搞的软件开发工程师 2021-06-10 加入
某摸鱼集团
评论