Oletusslotit sisällön projisointiin
Sijoittakaa -elementti komponentin sisään, jotta se voi vastaanottaa mielivaltaista alikomponenttisisältöä.
Oletusslotit sisällön projisointiin on ilmainen Sveltejs Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Sveltejs Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Sveltejs Academy-kurssilla on yhteensä 4 oppituntia.
Mitä slotit ovat
Slotien avulla parent-komponentit voivat lisätä merkintää child-komponentin tiettyihin kohtiin.
slot-elementti
Sijoittakaa child-komponentin sisälle <slot />-tagi kohtaan, jossa sisällön tulee näkyä.
<!-- Card.svelte -->
<div class="card">
<slot />
</div>Käyttö parent-komponentista
Sijoittakaa child-elementit komponenttitagin sisälle. Ne näkyvät slotin kohdalla.
<Card>
<p>Hello inside the card!</p>
</Card>Koostamisen voima
Tämän mallin avulla voitte rakentaa uudelleenkäytettäviä layout-kehyksiä, kuten kortteja, modaalisia ikkunoita ja sivuja.
Useita child-elementtejä
Default-slottiin voi sijoittaa minkä tahansa määrän elementtejä.
<Card>
<h1>Title</h1>
<p>Body</p>
</Card>Tavalliset merkkijonot
Voitte välittää slotin sisällöksi myös tavallista tekstiä.
<Button>Click me</Button>Ehdollinen sisältö
Valitkaa slotin sisältö parent-komponentin sisällä {#if}-rakenteella.
Komponentit sloteissa
Slotin sisältö voi sisältää vapaasti muita komponentteja.
<Card>
<Avatar />
<Username />
</Card>Tyylit
Slottiin sijoitettu sisältö käyttää sen parent-komponentin tyylejä, jossa sisältö määriteltiin, ei child-komponentin tyylejä.
Layout ja logiikka
Slotit ovat layout- ja koostamistyökalu, eivät tapa välittää dataa. Käyttäkää dataa varten propseja.
Slot-paikat
Komponentissa voi olla useita slot-paikkoja, sekä default-slot että nimetyt slotit.
Pikatarkistus
Missä slottiin sijoitettu sisältö näkyy?
Kertaus
Käyttäkää child-komponentissa <slot />-tagia ja välittäkää sisältö parent-tagien välissä sen lisäämiseksi.
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
- 41
- Oppitunnit
- 163
Usein kysytyt kysymykset
Onko oppitunti ”Oletusslotit sisällön projisointiin” ilmainen?
Kyllä – oppitunnin ”Oletusslotit sisällön projisointiin” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Sveltejs Academy-kurssin, päivitä CoddyKit PROhon. Sveltejs Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Oletusslotit sisällön projisointiin”?
Sijoittakaa -elementti komponentin sisään, jotta se voi vastaanottaa mielivaltaista alikomponenttisisältöä. Harjoittelet Sveltejs Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Sveltejs Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Sveltejs Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.
Kuinka kauan ”Oletusslotit sisällön projisointiin”-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ä Sveltejs Academy-oppitunnilla?
Kyllä. Jokainen Sveltejs 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
- Oletusslotit sisällön projisointiin
- Nimetyt slotit syntaksilla slot="name"
- Slotin varasisältö
- Slot-sisällön tarkistaminen $$slots-muuttujalla