Komponenttien propsit ja emitit
Välitä dataa alaspäin definePropsilla, lähetä tapahtumia ylöspäin defineEmitsillä ja validoi propsit type- ja required-rajoitteilla
Komponenttien propsit ja emitit on ilmainen Frontend Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/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 Frontend Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Frontend Academy-kurssilla on yhteensä 4 oppituntia.
Propsit Vue 3:ssa
Propsit välittävät dataa vanhemmalta komponentilta lapsikomponentille. Määritelkää ne <script setup> -lohkon sisällä defineProps()-funktion avulla. Propsit ovat lapsikomponentissa vain luku -muodossa — älkää koskaan muuttako niitä suoraan.
<script setup lang="ts">
const props = defineProps<{
title: string;
count?: number;
variant?: 'primary' | 'secondary';
}>();
</script>
<template>
<h2>{{ title }} ({{ count ?? 0 }})</h2>
</template>withDefaults propseille
Paketoikaa defineProps() withDefaults()-funktion sisään oletusarvojen määrittämiseksi.
<script setup lang="ts">
const props = withDefaults(defineProps<{
count?: number;
variant?: 'primary' | 'secondary';
}>(), {
count: 0,
variant: 'primary'
});
</script>Propsien välittäminen mallipohjassa
Välittäkää staattiset arvot tavallisina attribuutteina. Välittäkää dynaamiset arvot v-bind-direktiivillä (:). Välittäkää boolean-attribuutit pelkän läsnäolon perusteella eli ilman arvoa.
<MyButton title="Submit" :count="activeCount" variant="primary" />
<Toggle :disabled="isLoading" />Emits — viestintä lapselta vanhemmalle
Lapsikomponentit viestivät ylöspäin lähettämällä tapahtumia. Ilmoittakaa komponentin lähettämät tapahtumat defineEmits()-funktion avulla ja kutsukaa sen palauttamaa emit-funktiota.
<script setup lang="ts">
const emit = defineEmits<{
update: [value: string];
close: [];
submit: [data: FormData];
}>();
function handleSubmit(data: FormData) {
emit('submit', data); // fire the event
}
</script>Emit-tapahtumien kuuntelu vanhemmassa
Kuunnelkaa lapsikomponenttien mukautettuja tapahtumia mallipohjassa @eventName-määrityksen avulla.
<SearchInput
@update="searchTerm = $event"
@submit="handleSearch"
/>v-model mukautettujen komponenttien kanssa
Mukautetun komponentin v-model on lyhyt muoto määrityksistä :modelValue + @update:modelValue. Komponentin on hyväksyttävä prop ja lähetettävä päivitystapahtuma.
<!-- Parent: -->
<MyInput v-model="email" />
<!-- MyInput.vue: -->
<script setup lang="ts">
defineProps<{ modelValue: string }>();
const emit = defineEmits<{ 'update:modelValue': [string] }>();
</script>
<template>
<input :value="modelValue" @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)" />
</template>Useat v-model-sidonnat
Vue 3 tukee useita v-model-sidontoja yhdessä komponentissa nimettyjen muuntimien avulla.
<UserForm v-model:firstName="user.firstName" v-model:lastName="user.lastName" />Propsien validointi
Lisätkää Options APIssa tai suorituksen aikaisessa propsimäärityksessä tyyppi-, pakollisuus- ja validointirajoitteet. TypeScript-pohjainen defineProps() tarjoaa tämän käännösaikana.
Propit ja data — yksisuuntainen tietovirta
Vue pakottaa käyttämään yksisuuntaista tietovirtaa: propit kulkevat vanhemmalta lapselle ja tapahtumat lapselta vanhemmalle. Jos lapsikomponentin on muokattava dataa, se lähettää tapahtuman ja vanhempi käsittelee päivityksen.
Slotit vaihtoehtona propseille
Kun välitettävän sisällön tulee olla HTML:ää tai komponentteja eikä vain dataa, käyttäkää slotteja. Vanhempi tarjoaa sisällön komponentin aloitus- ja lopetustagien välissä, ja lapsi hahmontaa sen <slot />-elementillä.
<!-- Parent: -->
<Card title="Hello">
<p>This content goes in the default slot.</p>
</Card>
<!-- Card.vue: -->
<template>
<div class="card">
<h2>{{ title }}</h2>
<slot /> <!-- renders the p tag -->
</div>
</template>Pikatarkistus
Miten Vue-lapsikomponentti viestii tapahtumasta vanhemmalle komponentilleen?
Kertaus: Propit ja emitit
defineProps tyypitettyihin propimäärityksiin. withDefaults oletusarvoihin. Propit ovat lapsikomponenteissa vain luku -muodossa. defineEmits lähetettyjen tapahtumien ilmoittamiseen ja tyypittämiseen. @eventName vanhemmassa tapahtumien kuunteluun. v-model = :modelValue + @update:modelValue. Yksisuuntainen tietovirta: propit alaspäin, tapahtumat ylöspäin. Slotit sisällön ja mallipohjan osien välittämiseen.
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 ”Komponenttien propsit ja emitit” ilmainen?
Kyllä – oppitunnin ”Komponenttien propsit ja emitit” 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 Frontend Academy-kurssin, päivitä CoddyKit PROhon. Frontend Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Komponenttien propsit ja emitit”?
Välitä dataa alaspäin definePropsilla, lähetä tapahtumia ylöspäin defineEmitsillä ja validoi propsit type- ja required-rajoitteilla Harjoittelet Frontend Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Frontend Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Frontend Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.
Kuinka kauan ”Komponenttien propsit ja emitit”-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ä Frontend Academy-oppitunnilla?
Kyllä. Jokainen Frontend 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
- Vue SFC: script, template ja style
- Options API: data, methods ja computed
- Direktiivit: v-if, v-for, v-bind ja v-on
- Komponenttien propsit ja emitit