В Vue.js компоненты — это строительные блоки надежного модульного приложения. Они позволяют инкапсулировать и повторно использовать элементы пользовательского интерфейса в разных частях вашего приложения. Одной из мощных функций компонентов Vue является возможность использования нескольких слотов, что позволяет вставлять динамическое содержимое внутри компонента. В этой статье мы рассмотрим различные методы использования нескольких слотов в компонентах Vue, предоставляя вам гибкость и контроль над содержимым вашего компонента. Итак, приступим!

Метод 1: базовые несколько слотов

Для начала создадим простой компонент с именем MultipleSlotComponentс двумя слотами — headerи footer:

<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

Теперь, когда вы используете этот компонент, вы можете передавать контент в каждый слот:

<MultipleSlotComponent>
  <template v-slot:header>
    <h1>This is the header</h1>
  </template>
  <p>This is the default content</p>
  <template v-slot:footer>
    <footer>© 2024 My App</footer>
  </template>
</MultipleSlotComponent>

Метод 2: слоты с заданной областью

Слоты с заданной областью позволяют передавать данные из компонента в содержимое слота. Давайте улучшим наш MultipleSlotComponent, чтобы передать значение в слот header:

<template>
  <div>
    <slot name="header" :value="headerData"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>
<script>
export default {
  data() {
    return {
      headerData: 'Welcome to My App',
    };
  },
};
</script>

Теперь мы можем получить доступ к headerDataв слоте header:

<MultipleSlotComponent>
  <template v-slot:header="slotProps">
    <h1>{{ slotProps.value }}</h1>
  </template>
  <p>This is the default content</p>
  <template v-slot:footer>
    <footer>© 2024 My App</footer>
  </template>
</MultipleSlotComponent>

Метод 3: динамические имена слотов

Иногда вам может потребоваться динамическое изменение названий слотов в зависимости от определенных условий. Этого можно добиться, привязав имена слотов к переменным или вычисляемым свойствам:

<template>
  <div>
    <slot :name="headerSlotName"></slot>
    <slot></slot>
    <slot :name="footerSlotName"></slot>
  </div>
</template>
<script>
export default {
  data() {
    return {
      headerSlotName: 'header',
      footerSlotName: 'footer',
    };
  },
  computed: {
    shouldUseAlternateFooter() {
      // Some condition to determine when to use the alternate footer
      return true;
    },
    footerSlotName() {
      return this.shouldUseAlternateFooter ? 'alternate-footer' : 'footer';
    },
  },
};
</script>

Метод 4. Предоставление контента по умолчанию

В некоторых случаях вам может потребоваться предоставить контент по умолчанию, если слот остается пустым. Этого можно добиться, используя директиву v-slotс директивой v-if:

<template>
  <div>
    <slot name="header">
      <h1>Default Header</h1>
    </slot>
    <slot></slot>
    <slot name="footer">
      <footer>© 2024 My App</footer>
    </slot>
  </div>
</template>