详解vue 2.6 中 slot 的新用法

最近发布不久的Vue 2.6，使用插槽的语法变得更加简洁。 对插槽的这种改变让我对发现插槽的潜在功能感兴趣，以便为我们基于Vue的项目提供可重用性，新功能和更清晰的可读性。 真正有能力的插槽是什么？

如果你是Vue的新手，或者还没有看到2.6版的变化，请继续阅读。也许学习插槽的最佳资源是Vue自己的文档，但是我将在这里给出一个纲要。

想阅读更多优质文章请猛戳GitHub博客 ,一年百来篇优质文章等着你！

插槽是什么？

插槽是Vue组件的一种机制，它允许你以一种不同于严格的父子关系的方式组合组件。插槽为你提供了一个将内容放置到新位置或使组件更通用的出口。从一个简单的例子开始：

// frame.vue<template> <div class="frame"> <slot></slot> </div></template>

这个组件最外层是一个 div 。假设 div 的存在是为了围绕其内容创建一个样式框架。这个组件可以通用地用于将框架包围在wq你想要的任何内容上，来看看它是怎么用的。这里的 frame 组件指的是我们刚才做的组件。

// app.vue<template> <frame><img src="an-image.jpg"></frame></template>

在开始和结束 frame 标记之间的内容将插入到插槽所在的 frame 组件中，替换 slot 标记。这是最基本的方法。还可以简单地通过填充指定要放入槽中的默认内容

// frame.vue<template> <div class="frame"> <slot>如果这里没有指定任何内容，这就是默认内容</slot> </div></template>

所以现在如果我们这样使用它：

// app.vue<template> <frame /></template>

“ 如果这里没有指定任何内容，这就是默认内容 ”是默认内容，但是如果像以前那样使用它，默认文本将被 img 标记覆盖。

多个/命名的插槽

可以向组件添加多个插槽，但是如果这样做了，那么除了其中一个之外，其他所有插槽都需要有名称。如果有一个没有名称的槽，它就是默认槽。下面是如何创建多个插槽：

// titled-frame.vue<template> <div class="frame"> <header><h2> <slot name="header">Title</slot> </h2></header> <slot>如果这里没有指定任何内容，这就是默认内容</slot> </div></template>

我们保留了相同的默认槽，但这次我们添加了一个名为 header 的槽，可以在其中输入标题，用法如下：

// app.vue<template> <titled-frame> <template v-slot:header> <!-- The code below goes into the header slot --> My Image's Title </template> <!-- The code below goes into the default slot --> <img src="an-image.jpg"> </titled-frame></template>