vue如何有条件地渲染slot

vue如何有条件地渲染slot

这篇文章主要为大家展示了“vue如何有条件地渲染slot”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“vue如何有条件地渲染slot”这篇文章吧。

有条件地渲染slot

每个Vue组件都有一个特殊的$slots对象，其中包含所有slot。 默认slot具有默认键，名字命名的slot都使用它们的名称作为键：

const$slots={default:<defaultslot>,icon:<iconslot>,button:<buttonslot>,};

但是这个$slots对象只有应用于组件的slot，而不是每个定义的slot。

以这个定义了几个slot的组件为例，包括几个命名的slot：

<!--Slots.vue--><template><div><h3>这里是一些slots</h3><slot/><slotname="second"/><slotname="third"/></div></template>

如果我们只对组件应用一个slot，则只有该slot会出现在我们的$slots对象中：

<template><Slots><template#second>这将应用于第二个slot</template></Slots></template>$slots={second:<vnode>}

我们可以在我们的组件中使用它来检测哪些slot已应用于组件，

例如：通过隐藏slot的包装元素：\

<template><div><h3>一个包裹的slot</h3><divv-if="$slots.default"class="styles"><slot/></div></div></template>

现在div，应用样式的包装器只有在我们实际用某些东西填充该slot时才会呈现。

如果我们不使用v-if，div如果我们没有slot，我们最终会得到一个空的和不必要的。根据所div具有的样式，这可能会弄乱我们的布局并使事情看起来很奇怪。

1 为什么我们希望能够有条件地渲染slot呢？

使用条件slot主要有以下三个原因：

• 使用wrapper div来添加默认样式时

• slot是空的

• 当我们将默认内容与嵌套slot组合
  

例如，当我们添加默认样式时，我们会在slot周围添加一个div：

<template><div><h3>Thisisaprettygreatcomponent,amirite?</h3><divclass="default-styling"><slot></div><button@click="$emit('click')">Clickme!</button></div></template>

但是，如果父组件没有将内容应用到该slot，我们最终会在页面div上呈现一个空的：\

<div><h3>这是一个非常棒的组件</h3><divclass="default-styling"><!--slot中没有内容，但仍会呈现此div--></div><button@click="$emit('click')">Clickme!</button></div>

v-if在包装上添加它div可以解决问题。没有应用到slot的内容？像这样：\

<div><h3>这是一个非常棒的组件</h3><button@click="$emit('click')">Clickme!</button></div>

以上是“vue如何有条件地渲染slot”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注恰卡编程网行业资讯频道！