Vueでslotが存在するかどうかでスタイル等を変えたい場面ってありませんか？
現在Nuxtプロジェクトにジョインし使用場面があり、方法を調べたので解説します！
結論 slotが存在するかどうかで条件分岐を作る方法
公式ドキュメントを見ると、以下記載がありました。
スロットが存在するかどうかに基づいて何かをレンダリングしたい場合があります。
https://ja.vuejs.org/guide/components/slots#conditional-slots
実際に私が書いたコードはこんな感じ。↓
<template>
<div class="FormLayout" :class="{'has-flow' : this.$slots.flow}">
<slot name="flow" />
<div>
<slot />
</div>
</div>flowというslotが存在していたときに、クラスを追加してスタイルを変えることに成功しました！
公式のコードも貼っておきます。
<template>
<div class="card">
<div v-if="$slots.header" class="card-header">
<slot name="header" />
</div>
<div v-if="$slots.default" class="card-content">
<slot />
</div>
<div v-if="$slots.footer" class="card-footer">
<slot name="footer" />
</div>
</div>
</template>まとめ
意外と知られていないslotが存在するかどうかで条件分岐する方法について解説しました！
お役に立てると幸いです。
