Vue Academy · Oppitunti

Dynaamiset slot-nimet

v-slot:[dynamicName], ohjelmallinen slotin valinta, ehdollinen slotin renderöinti.

Oppitunti 3/413 vaihetta

Dynaamiset slot-nimet on ilmainen Vue Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Vue Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Vue Academy-kurssilla on yhteensä 4 oppituntia.

Miksi dynaamiset slotinimet

Joskus täytettävää slottia ei tiedetä ennen suoritusta – se riippuu propista, tilasta tai silmukkamuuttujasta. Vue antaa laskea slotin nimen hakasuljesyntaksilla.

Dynaamisen argumentin syntaksi

Ympäröikää lauseke hakasulkeilla v-slot:-direktiivin jälkeen. Vue laskee sen arvon määrittääkseen kohdeslotin nimen.

<MyComponent>
  <template v-slot:[dynamicName]>
    Goes into whatever slot dynamicName equals
  </template>
</MyComponent>

Hakasulkeellinen lyhenne

Myös #-lyhenne tukee dynaamisia argumentteja.

<MyComponent>
  <template #[dynamicName]>
    Dynamic slot content
  </template>
</MyComponent>

Nimen ohjaaminen tilan avulla

Hakasulkeissa oleva lauseke voi lukea mitä tahansa reaktiivista arvoa. Muuttujan vaihtaminen muuttaa slotia, johon sisältö täytetään.

const dynamicName = ref("header");
// later: dynamicName.value = "footer";

Renderöidyn sisällön vaihtaminen

Kun tämän yhdistää lapsikomponenttiin, joka määrittää useita nimettyjä slotteja, dynaamisilla nimillä voidaan näyttää tilan perusteella eri alueiden sisältöä yhdessä templatedefinitionissa.

<!-- child has slots: header, body, footer -->
<Panel>
  <template #[activeSection]>
    Active content here
  </template>
</Panel>

Nimien valitseminen propseista

Komponentin prop voi määrittää käytettävän slotin. Tämä on hyödyllistä muokattavissa käärekomponenteissa, joissa kutsuja valitsee alueen.

const props = defineProps({ target: String });
// use props.target inside #[props.target]

Dynaamisten slottien iteroiminen

Voitte renderöidä slotteja silmukassa laskemalla kunkin nimen silmukan alkiosta. Tämä on hyödyllistä esimerkiksi taulukon sarakkeissa tai välilehtijärjestelmissä.

<template
  v-for="col in columns"
  v-slot:[col.name]="{ row }"
>
  {{ row[col.field] }}
</template>

Pienet kirjaimet ja kelvolliset nimet

Dynaamisten slotinimien pitäisi palauttaa kelvollisia merkkijonoja. null käsitellään oletusslottina. Välttäkää inline-templateissa välilyöntejä ja merkkejä, jotka eivät kelpaa HTML-attribuuttien nimissä.

const name = condition ? "primary" : null;
// null -> default slot

Ehdollinen slotin valinta

Hakasulkeiden sisällä oleva ternääri valitsee ehdon perusteella slotin suoraan templaten avulla.

<Alert>
  <template #[isError ? 'error' : 'info']>
    {{ message }}
  </template>
</Alert>

Käyttötapaus: välilehtikomponentti

Tabs-komponentti voi renderöidä aktiivisen välilehden sisällön laskemalla slotin nimen valitun välilehden tunnisteesta. Näin isäntäkomponentin kuvaus pysyy deklaratiivisena.

<Tabs>
  <template #[currentTab]>
    {{ tabContent }}
  </template>
</Tabs>

Pitäkää koodi luettavana

Dynaamiset slotit ovat tehokkaita, mutta ne voivat hämärtää tarkoitusta. Suosikaa niitä, kun slottien joukko määräytyy aidosti datan perusteella. Jos slotteja on vain muutama kiinteästi määritelty, tavalliset nimetyt slotit ovat selkeämpiä.

Pikatarkistus

Millä syntaksilla valitaan slotti, jonka nimi lasketaan suorituksen aikana?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Opitte, että dynaamiset slot-nimet käyttävät hakasuljesyntaksia v-slot:[expr] tai #[expr] määrittämään propsien tai tilan perusteella, mikä slot täytetään. Näin voidaan toteuttaa mukautettavia käärekomponentteja, välilehtijärjestelmiä ja dataohjattua sarakkeiden renderöintiä.

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 42
Oppitunnit: 156

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Dynaamiset slot-nimet” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Vue Academy-oppimispolun 3 oppituntia, myös oppitunnin “Dynaamiset slot-nimet”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Vue Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Dynaamiset slot-nimet”?

v-slot:[dynamicName], ohjelmallinen slotin valinta, ehdollinen slotin renderöinti. Harjoittelet Vue Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Vue Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Vue Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.

Kuinka kauan ”Dynaamiset slot-nimet”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Vue Academy-oppitunnilla?

Kyllä. Jokainen Vue Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

Nimetyt slotit ja oletusslotti
Rajatut slotit: tietojen välittäminen emolle
Dynaamiset slot-nimet
Slotin varasisältö ja slottien tarkistaminen

← Takaisin: Vue Academy