详解详解vue 2.6 中中 slot 的新用法的新用法
对插槽的这种改变让我对发现插槽的潜在功能感兴趣,以便为我们基于Vue的项目提供可重用性,新功能和更清
晰的可读性。这篇文章主要介绍了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