Kuinka käyttää rekvisiittaa parempien Vue-komponenttien luomiseen

Yksi Vuen tärkeimmistä ominaisuuksista on sen modulaarinen arkkitehtuuri, jonka avulla voit rakentaa verkkosovelluksia yhdistämällä pieniä, uudelleenkäytettäviä komponentteja. Näin voit päivittää ja ylläpitää verkkosovellustasi helposti.

Jokaisella Vuen komponentilla voi olla omat tieto- ja menetelmänsä, jotka voit välittää sen alikomponenteille rekvisiittauksen avulla. Täällä opit käyttämään Vue-rekvisiitta tietojen siirtämiseen vanhemmilta lapsikomponenteille.

Mitä ovat rekvisiitta Vuessa?

Props - lyhenne sanoista "ominaisuudet" - ovat mukautettuja attribuutteja Vuessa, jotka yläkomponentti voi välittää alakomponenteilleen.

Vuessa emokomponentit välittävät rekvisiitta alikomponenteille yksisuuntaisessa virtauksessa. Tämä tarkoittaa, että lapsikomponentit voivat vain lukea ja käyttää näitä hyväksyttyjä rekvisiitta, mutta eivät voi muokata tietoja.

Rekvisiittausten avulla voit luoda uudelleenkäytettäviä komponentteja, joita voit käyttää koko sovelluksessasi. Rekvisiitta säästää aikaa ja vaivaa, koska voit käyttää komponentteja uudelleen sen sijaan, että luot uusia komponentteja tyhjästä.

Rekvisiitta välittäminen Vuessa

Rekvisiittailu Vuessa on yksinkertaista ja erilaista kuin ohittaminen rekvisiitta Reactissa. Jos haluat siirtää ehdotuksen pääkomponentista sen alikomponenttiin Vuessa, käytä alikomponentin komentosarjan props-vaihtoehtoa.

Tässä on esimerkki:

 Lapsikomponentti 
<sapluuna>
<div>
<h1>{{ otsikko }}h1>
<s>{{ viesti }}s>
<s>{{ sähköpostiosoite }}s>
div>
sapluuna>
<käsikirjoitus>
vienti oletus {
 nimi: "ChildComponent",
 rekvisiitta: ["title", "message", "emailAddress"],
};
käsikirjoitus>

Yllä oleva koodilohko kuvaa Vue-lapsikomponenttia, joka käyttää rekvisiittaa välittämään dataa pääkomponentista. Komponentti sisältää kolme HTML-elementtiä, jotka näyttävät otsikko, viesti, ja sähköpostiosoite ominaisuuksia interpoloinnilla.

The rekvisiitta vaihtoehto lapsikomponentissa ottaa joukon ominaisuuksia. Tämä matriisi määrittää ominaisuudet, jotka lapsikomponentti hyväksyy pääkomponentista.

Tässä on esimerkki Vue-emokomponentista, joka välittää tietoja alikomponentille rekvisiitta:

 emokomponentti 
<sapluuna>
<div>
<lapsikomponentti
 title="Hei maailma"
 message="Tämä on viesti pääkomponentista"
 emailAddress="[email protected]"
 />
div>
sapluuna>
<käsikirjoitus>
tuo ChildComponent osoitteesta "./components/ChildComponent.vue";
vienti oletus {
 nimi: "ParentComponent",
 komponentit: {
 ChildComponent,
 },
};
käsikirjoitus>

Yllä olevan koodilohkon emokomponentti välittää kolme tukea lapsikomponentille. Koodilohko välittää staattiset arvot otsikko, viesti, ja sähköpostiosoite rekvisiitta.

Voit myös välittää dynaamisia arvoja rekvisiittallesi v-sidos direktiivi. v-sidos on direktiivi käytetään Vuessa tietojen sitomiseen HTML-määritteille.

Tässä on esimerkki Vue-emokomponentista, joka käyttää v-sidos käsky dynaamisten arvojen välittämiseksi rekvisiittalle:

 emokomponentti 
<sapluuna>
<div>
<lapsikomponentti
 :title= "title"
 :message= "viesti"
 :emailAddress= "sähköpostiosoite"
 />
div>
sapluuna>
<käsikirjoitus>
tuo ChildComponent osoitteesta "./components/ChildComponent.vue";
vienti oletus {
 nimi: "ParentComponent",
 komponentit: {
 ChildComponent,
 },
 data() {
 return {
 otsikko: "Tervetuloa rakas",
 viesti: "Kuinka voit",
 sähköpostiosoite: "[email protected]",
 };
 },
};
käsikirjoitus>

Käyttämällä v-sidos käsky siirtää tietoja alikomponenttiin, voit päivittää rekvisiitta-arvot emokomponentin tilan perusteella. Esimerkiksi muuttamalla otsikko dataominaisuus emokomponentissa, otsikko alikomponenttiin välitetty ehdotus päivitetään myös.

Tämä menetelmä, jolla rekvisiitta määritellään merkkijonoiksi, on lyhennelmä. Jokainen taulukon merkkijonoista edustaa ehdotusta. Tämä menetelmä on ihanteellinen, kun kaikilla taulukon rekvisiitta on sama JavaScript-tietotyyppi.

Rekvisiitin määrittäminen objektiksi Vuessa

Rekvisiittajen määrittäminen JavaScript-objektiksi taulukon sijaan mahdollistaa kunkin rekvisiitin paremman mukauttamisen. Kun määrität rekvisiitta komponentin objektiksi, voit määrittää kunkin rekvisiitin odotetun tietotyypin ja oletusarvon.

Lisäksi voit merkitä tietyt rekvisiitta tarpeen mukaan, mikä laukaisee varoituksen, jos tukia ei ole toimitettu komponentin ollessa käytössä. Rekvisiitin määrittäminen objektiksi tarjoaa useita etuja verrattuna rekvisiittamäärittelyyn joukoksi, mukaan lukien:

1. Odotetun tietotyypin ja oletusarvon määrittäminen kullekin tarpeelle helpottaa sinun ja kehittäjätiimisi ymmärtämistä, kuinka komponenttia käytetään tarkasti.
2. Merkitsemällä rekvisiitta tarpeen mukaan voit havaita virheet kehitysprosessin varhaisessa vaiheessa ja antaa lisätietoja kehittäjätiimille.

Tässä on esimerkki siitä, kuinka rekvisiitta määritetään objektiksi Vue.js-komponentissa:

<sapluuna>
<div>
<h1>{{ otsikko }}h1>
<s>{{ viesti }}s>
<s>{{ sähköpostiosoite }}s>
div>
sapluuna>
<käsikirjoitus>
vienti oletus {
 nimi: "ChildComponent",
 rekvisiitta: {
 otsikko: {
 tyyppi: merkkijono,
 oletus: "Oletusotsikko",
 },
 viesti: {
 tyyppi: merkkijono,
 oletus: "Oletusviesti",
 },
 sähköpostiosoite: {
 tyyppi: merkkijono,
 vaaditaan: tosi,
 },
 },
};
käsikirjoitus>

Tämä koodilohko on esimerkki Vue.js-komponentista, joka käyttää rekvisiittaa siirtämään tietoja pääkomponentista alakomponenttiin. Koodilohko määrittelee nämä tarpeet objekteiksi, joilla on tyyppi ja oletusarvo tai vaadittu lippu.

Koodilohko määrittää otsikko ja viesti rekvisiitta kielinä a oletuksena arvo ja sähköpostiosoite prop as a edellytetään merkkijono.

Valitse paras menetelmä, joka sopii Vue-sovelluksellesi

Olet oppinut määrittelemään rekvisiitta sekä taulukona että objektina. Valituksesi tulee sopia sovelluksesi erityistarpeisiin.

Vue osoittaa olevansa erittäin joustava JavaScript-kehys. Se tarjoaa monia menetelmiä ja vaihtoehtoja saman tavoitteen saavuttamiseksi erilaisilla eduilla mille tahansa valitsemillesi vaihtoehdoille tai menetelmille.