Kam paredzēti sloti Vue un kā tie darbojas?

Vue sloti tiek izmantoti, lai ievietotu ārēju saturu komponentos. Tas ļauj izveidot elastīgākas un atkārtoti izmantojamas komponentes.

Ir trīs slotu veidi:

• Noklusējuma (Default Slots): tiek izmantoti galvenā satura ievietošanai.

  <template>
    <div>
      <slot></slot>
    </div>
  </template>
  

  Lietošana:

  <my-component>
    <p>Šis saturs tiks ievietots noklusējuma slotā.</p>
  </my-component>
  

• Nosauktie sloti (Named Slots): ļauj ievietot saturu konkrētos komponenta slotos, kas atšķiras pēc nosaukuma.

  <template>
    <div>
      <slot name="header"></slot>
      <div>Galvenais komponenta saturs</div>
      <slot name="footer"></slot>
    </div>
  </template>
  

  Lietošana:

  <my-component>
    <template v-slot:header>
      <h2>Virsraksts</h2>
    </template>
    <template v-slot:footer>
      <p>Kājene</p>
    </template>
  </my-component>
  

  Īsā sintakse v-slot:

  <my-component>
    <template #header>
      <h2>Virsraksts (īsā sintakse)</h2>
    </template>
  </my-component>
  

• Scoped sloti: ļauj bērnu komponentam nodot datus vecākam caur slotu. Vecāks var izmantot šos datus, attēlojot slotu.

  <template>
    <ul>
      <li v-for="item in items" :key="item.id">
        <slot :item="item" :index="index"></slot>
      </li>
    </ul>
  </template>
  
  

  Lietošana:

  <my-list :items="['Apple', 'Banana', 'Orange']">
    <template v-slot:default="slotProps">
      {{ slotProps.index + 1 }}. {{ slotProps.item }}
    </template>
  </my-list>
  
  

  slotProps destrukturizācija:

  <my-list :items="['Apple', 'Banana', 'Orange']">
    <template v-slot="{ item, index }">
      {{ index + 1 }}. {{ item }} (Destrukturizācija)
    </template>
  </my-list>
  

Sloti darbojas kā "vietas" komponenta šablonā, kur vecāks var ievietot savu saturu. Rende laikā Vue aizstāj <slot> (vai <slot name="...">) ar vecāka nodrošināto saturu. Scoped slotu gadījumā, dati no bērna komponenta ir pieejami caur slota šablona argumentu objektu vecāka komponentā.