vue如何有條件地渲染slot

這篇文章主要為大家展示了“vue如何有條件地渲染slot”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“vue如何有條件地渲染slot”這篇文章吧。

有條件地渲染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具有的樣式，這可能會弄亂我們的布局并使事情看起來很奇怪。

1 為什么我們希望能夠有條件地渲染slot呢？

使用條件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”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！