Nimetyt slotit ja oletusslotti
Useat -slotit, , lyhyt syntaksi #name.
Nimetyt slotit ja oletusslotti on ilmainen Vue Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/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.
Mitä slotit ovat
Slotit mahdollistavat sen, että isäntäkomponentti välittää merkintää lapsikomponentille. Lapsikomponentti määrittää missä sisältö näytetään käyttämällä <slot>-elementtiä. Tätä kutsutaan Vuen sisällön jakeluksi.
Oletusslotti
Nimetön <slot> on oletusslotti. Kaikki, mitä isäntäkomponentti sijoittaa komponenttitagien väliin, päätyy siihen.
<!-- Card.vue -->
<div class="card">
<slot></slot>
</div>Oletusslotin käyttäminen
Isäntäkomponentti sijoittaa sisällön yksinkertaisesti komponenttitagien sisään.
<Card>
<p>This goes into the default slot</p>
</Card>Miksi nimetyt slotit
Monilla komponenteilla on useita sijoituskohtia – esimerkiksi otsake, leipäteksti ja alatunniste. Nimetyt slotit antavat kullekin alueelle tunnisteen, jonka avulla isäntäkomponentti voi kohdistaa niihin yksitellen.
Nimettyjen slottien määrittäminen
Lisätkää jokaiseen slottiin name-attribuutti. Komponentissa voi olla nimettyjä slotteja sekä yksi oletusslotti eli nimeämätön slotti.
<!-- Card.vue -->
<div class="card">
<header><slot name="header"></slot></header>
<main><slot></slot></main>
<footer><slot name="footer"></slot></footer>
</div>Nimettyjen slottien täyttäminen v-slotilla
Isäntäkomponentissa käärikää sisältö <template>-elementtiin, jossa käytetään v-slot:name-direktiiviä nimetyn slotin kohdistamiseen.
<Card>
<template v-slot:header>
<h2>Title</h2>
</template>
<template v-slot:footer>
<button>OK</button>
</template>
</Card>#-lyhenne
v-slot:-direktiivillä on lyhenne: #. Siksi v-slot:header voidaan kirjoittaa muodossa #header. Tämä on suositeltu ja tiivis esitystapa.
<Card>
<template #header>
<h2>Title</h2>
</template>
</Card>Oletussisältö tagien välissä
Suoraan komponenttitagien väliin sijoitettu sisältö (ei nimetyn templaten sisään sijoitettu) menee oletusslottiin. Voitte kohdistaa sen myös eksplisiittisesti käyttämällä #default-merkintää.
<Card>
<p>Implicit default slot content</p>
<template #footer>Footer</template>
</Card>Implisiittisen ja eksplisiittisen yhdistäminen
Voitte kirjoittaa oletussisällön vapaamuotoisesti ja nimetyt slotit template-elementtien avulla saman komponentin käytössä. Vue ohjaa kunkin osan oikeaan paikkaan nimen perusteella.
<Card>
<template #header><h2>Header</h2></template>
Body text right here
<template #footer>Footer</template>
</Card>Renderöintijärjestys
Slottien järjestyksellä isäntäkomponentissa ei ole merkitystä – lapsikomponentin template hallitsee lopullista asettelua. Slotin sisältö näkyy aina siinä kohdassa, johon lapsikomponentti sijoitti vastaavan <slot>-elementin.
Käytännöllinen asettelukomponentti
Nimetyt slotit mahdollistavat uudelleenkäytettävät asettelupohjat. Yksi <BaseLayout>-komponentti voi sisältää minkä tahansa sivun vastaanottamalla otsake-, sivupalkki- ja pääsisältöslotit.
<!-- BaseLayout.vue -->
<header><slot name="header" /></header>
<aside><slot name="sidebar" /></aside>
<main><slot /></main>Pikatarkistus
Mikä on lyhenne muodolle v-slot:header?
Kertaus
Opitte, että slotit jakavat isäntäkomponentin merkinnän lapsikomponentille. Nimetön <slot> on oletusslotti, ja name-attribuutin lisääminen luo nimetyn slotin. Isäntäkomponentti täyttää slotit muodolla <template v-slot:name> tai #name-lyhenteellä, ja lapsikomponentin template määrittää lopullisen sijoittelun.
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
Usein kysytyt kysymykset
Onko oppitunti ”Nimetyt slotit ja oletusslotti” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Vue Academy-oppimispolun 3 oppituntia, myös oppitunnin “Nimetyt slotit ja oletusslotti”. 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 ”Nimetyt slotit ja oletusslotti”?
Useat -slotit, , lyhyt syntaksi #name. 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 1/4.
Kuinka kauan ”Nimetyt slotit ja oletusslotti”-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