这篇文章主要为大家展示了“vue如何有条件地渲染slot”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue如何有条件地渲染slot”这篇文章吧。
每个 Vue
组件都有一个特殊的 $slots
对象,其中包含所有slot
。 默认slot
具有默认键,名字命名的slot都使用它们的名称作为键:
const $slots = { default: <default slot>, icon: <icon slot>, button: <button slot>, };
但是这个$slots
对象只有应用于组件的slot
,而不是每个定义的slot
。
以这个定义了几个slot的组件为例,包括几个命名的slot:
<!-- Slots.vue --> <template> <div> <h3>这里是一些slots</h3> <slot /> <slot name="second" /> <slot name="third" /> </div> </template>
如果我们只对组件应用一个slot,则只有该slot会出现在我们的$slots对象中:
<template> <Slots> <template #second> 这将应用于第二个slot </template> </Slots> </template> $slots = { second: <vnode> }
我们可以在我们的组件中使用它来检测哪些slot
已应用于组件,
例如:通过隐藏slot
的包装元素:\
<template> <div> <h3>一个包裹的slot</h3> <div v-if="$slots.default" class="styles"> <slot /> </div> </div> </template>
现在div
,应用样式的包装器只有在我们实际用某些东西填充该slot
时才会呈现。
如果我们不使用v-if
,div
如果我们没有slot
,我们最终会得到一个空的和不必要的。根据所div具有的样式,这可能会弄乱我们的布局并使事情看起来很奇怪。
使用条件slot主要有以下三个原因:
使用 wrapper div
来添加默认样式时
slot
是空的
当我们将默认内容与嵌套slot
组合
例如,当我们添加默认样式时,我们会在slot
周围添加一个div:
<template> <div> <h3>This is a pretty great component, amirite?</h3> <div class="default-styling"> <slot > </div> <button @click="$emit('click')">Click me!</button> </div> </template>
但是,如果父组件没有将内容应用到该slot,我们最终会在页面div上呈现一个空的:\
<div> <h3>这是一个非常棒的组件</h3> <div class="default-styling"> <!-- slot中没有内容,但仍会呈现此 div--> </div> <button @click="$emit('click')">Click me!</button> </div>
v-if在包装上添加它div可以解决问题。没有应用到slot的内容?像这样:\
<div> <h3>这是一个非常棒的组件</h3> <button @click="$emit('click')">Click me!</button> </div>
以上是“vue如何有条件地渲染slot”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。