Kam skirti „slots“ Vue ir kaip jie veikia?

Vue naudojami slotai, kad į komponentus būtų įterptas išorinis turinys. Tai leidžia kurti lankstesnius ir pakartotinai naudojamus komponentus.

Yra trys slotų tipai:

• Numatytieji (Default Slots): naudojami pagrindiniam turiniui įterpti.

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

  Naudojimas:

  <my-component>
    <p>Šis turinys bus įterptas į numatytąjį slotą.</p>
  </my-component>
  

• Pavadinti slotai (Named Slots): leidžia įterpti turinį į konkrečius komponento slotus, kurie skiriasi pagal pavadinimą.

  <template>
    <div>
      <slot name="header"></slot>
      <div>Pagrindinis komponento turinys</div>
      <slot name="footer"></slot>
    </div>
  </template>
  

  Naudojimas:

  <my-component>
    <template v-slot:header>
      <h2>Antraštė</h2>
    </template>
    <template v-slot:footer>
      <p>Futeras</p>
    </template>
  </my-component>
  

  Trumpesnis sintaksis v-slot:

  <my-component>
    <template #header>
      <h2>Antraštė (trumpesnis sintaksis)</h2>
    </template>
  </my-component>
  

• Scoped slotai: leidžia vaikų komponentui perduoti duomenis tėvui per slotą. Tėvas gali naudoti šiuos duomenis sloto šablone.

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

  Naudojimas:

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

  slotProps destruktūrizacija:

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

Slotai veikia kaip "vietos" komponento šablone, kur tėvas gali įterpti savo turinį. Rende metu Vue pakeičia <slot> (arba <slot name="...">) žymę į tėvo pateiktą turinį. Scoped slotų atveju, duomenys iš vaiko komponento yra prieinami per sloto šablono argumentų objektą tėvo komponento kontekste.