Teknologian jakaminen

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

esittely

Vue 3 esittelee Composition API:n, joka tuo uutta joustavuutta ja tehoa komponenttiviestintään.

Komponenttiviestinnän perusteet

Komponenttien määritelmä ja toiminta

Front-end-kehityksessä komponentit voidaan ajatella itsenäisinä yksiköinä, jotka rakentavat käyttöliittymän. Se kapseloi tiettyjä toimintoja ja tyylejä, sitä voidaan käyttää uudelleen ja sitä voidaan kehittää ja testata muista osista riippumatta. Komponenttien päätehtävänä on parantaa koodin uudelleenkäytettävyyttä, ylläpidettävyyttä ja skaalautuvuutta. Jakamalla käyttöliittymän useisiin komponentteihin kehittäjät voivat helpommin hallita monimutkaisia ​​sovelluksia, ja jokainen komponentti voidaan optimoida parantamaan yleistä kehitystehokkuutta ja sovellusten suorituskykyä.

Komponenttipuu ja emo-alakomponenttisuhde

Käyttöliittymäkehyksessä, kuten Vue.js, komponentit voidaan sisäkkäin muodostaa komponenttipuu. Tässä puurakenteessa jokaisella komponentilla voi olla alikomponentteja, ja näillä alikomponenteilla voi olla omat alikomponentit, jotka muodostavat hierarkkisen rakenteen. Tämä rakenne tekee komponenttien välisestä suhteesta selkeän ja helpottaa hallintaa ja ylläpitoa.

• Vanhemman ja lapsen komponenttisuhde : Komponenttipuussa komponentti voi luoda toisen komponentin. Tässä tapauksessa luojaa kutsutaan pääkomponentiksi ja luotua komponenttia alikomponentiksi. Yläkomponentit voivat välittää tietoja ja menetelmiä alikomponenteille, ja alakomponentit voivat lähettää tietoja yläkomponenteille tapahtumien kautta. Tämä vanhempi-lapsi-suhde on komponenttiviestinnän perusta.
• Sisaruskomponenttisuhde : Useat saman pääkomponentin alikomponentit ovat sisarkomponenttisuhteita. Sisarkomponentit eivät voi kommunikoida suoraan toistensa kanssa, ja niiden välinen viestintä on yleensä välitettävä emokomponentin kautta.
• Esi- ja jälkeläisten komponenttien suhteet : Komponenttipuussa emokomponentin emokomponentti on esi-isäkomponentti ja alikomponentin alikomponentti on jälkeläinen komponentti. Tämä suhde on erityisen tärkeä, kun käsitellään syvälle sisäkkäisiä komponentteja.

Komponenttipuiden ja emo-lapsikomponenttisuhteiden käsitteet ovat ratkaisevan tärkeitä komponenttien viestinnän ymmärtämisessä. Näiden perustietojen hallitseminen voi auttaa kehittäjiä suunnittelemaan ja toteuttamaan komponenttien välisiä viestintämekanismeja tehokkaammin.

Vanhemman ja lapsen välinen viestintä (Vue 3)

Vanhempi välittää tiedot lapselle (rekvisiitta)

Mitä ovat rekvisiitta
Rekvisiitta on mekanismi, jolla pääkomponentit välittävät tietoja alakomponenteille.Vue 3:ssa käytädefinePropsAPIa käytetään vastaanottavien rekvisiittausten ilmoittamiseen, mikä ylläpitää yksisuuntaista tiedonkulkua ja varmistaa komponenttien riippumattomuuden ja uudelleenkäytettävyyden.

Rekvisiitta välittäminen pääkomponentissa
Käytä pääkomponentin mallissav-bindtai lyhenne:Tietojen sitominen:

<template>
   <ChildComponent :my-prop="parentData" />
</template>

tässä,:my-propOsoittaa, että tämä on dynaamisesti sidottu tuki,parentDataOnko pääkomponentissa määritetty data。

Miten saada rekvisiitta lapsikomponentissa
Käytä lapsikomponentissadefinePropsIlmoita vastaanotetuista rekvisiittauksista:

<script setup>
import { defineProps } from 'vue';
 
const props = defineProps({
   myProp: String
});
</script>

olla olemassa<script setup>Syntaktisessa sokerissadefinePropsPaljastaa rekvisiitta automaattisesti komponentin responsiivisina ominaisuuksina。

Lapsi siirtää tapahtuman vanhemmalle (Emit)

mitä säteilee
Emit on mekanismi, jolla alikomponentit lähettävät viestejä yläkomponenteille.Vue 3:ssa käytädefineEmitsAPI ilmoittaa tapahtumia, jotka voidaan lähettää, ja käyttääemittoiminto käynnistää tapahtumia.

Tapahtuman käynnistäminen lapsikomponentissa
Käytä lapsikomponentin menetelmässä defineEmits julistaa tapahtumia, jotka voidaan lähettää, ja käyttää emit laukaista:

<script setup>
import { defineEmits } from 'vue';
 
const emit = defineEmits(['my-event']);
 
function triggerEvent() {
   emit('my-event', dataToPass);
}
</script>

defineEmitskäytetään ilmoittamaan tapahtumia, joita komponentti voi lähettää, kun taasemitToimintoja käytetään näiden tapahtumien käynnistämiseen.

Kuinka kuunnella lapsikomponentin tapahtumia yläkomponentissa
Pääkomponentin mallissakäyttääv-ontai lyhenne@ Lapsikomponenttien lähettämien tapahtumien kuunteleminen:

<template>
   <ChildComponent @my-event="handleEvent" />
//或者<ChildComponent v-on:my-event="handleEvent" />
</template>

tässä,@my-eventOsoittaa, että kuuntelualikomponentti lähettäämy-eventtapahtuma,handleEventSe on pääkomponentissa määritetty menetelmä Kun tapahtuma laukaistaan, tätä menetelmää kutsutaan.

Kattava esimerkki

Oletetaan, että siinä on emokomponenttiParentComponentja alikomponenttiChildComponent, pääkomponentin on välitettävä tiedot alikomponentille ja alikomponentin on ilmoitettava pääkomponentille tietyn toiminnon jälkeen.

emokomponenttiParentComponent.vue

<template>
   <ChildComponent :my-prop="parentData" @child-event="handleChildEvent" />
</template>
 
<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
 
const parentData = ref('initial data');
const handleChildEvent = (data) => {
   console.log('Received data from child:', data);
};
</script>

OsakokoonpanoChildComponent.vue

<template>
   <button @click="sendDataToParent">Send Data to Parent</button>
</template>
 
<script setup>
import { defineProps, defineEmits } from 'vue';
 
const props = defineProps({
   myProp: String
});
 
const emit = defineEmits(['child-event']);
 
function sendDataToParent() {
   emit('child-event', props.myProp);
}
</script>

Tässä esimerkissä pääkomponentti läpäisee:my-propVälitä tiedot lapsikomponenteille ja hyväksy@child-event Kuuntele lapsikomponenttien lähettämiä tapahtumia.lapsikomponentti kulkeedefinePropsVastaanottaa pääkomponentin välittämän sisällönmyPropja käytä sitä painikkeen napsautustapahtumassaemitLähetä tiedot pääkomponenttiin.

Pinian käyttäminen (Vue 3:n osavaltionhallintakirjasto)

Pinian edut ja ominaisuudet

Pinia on virallisesti suositeltu tilanhallintakirjasto Vue 3:lle. Se tarjoaa komponenttipohjaisen tavan hallita sovelluksen tilaa. Tässä on joitain Pinian tärkeimmistä eduista ja ominaisuuksista:

• Komponentti API: Pinia ottaa käyttöön komponenttipohjaisen API:n, mikä tekee tilanhallinnan ja komponenttilogiikan erottamisesta luonnollisempaa.
• TypeScript-tuki: Pinia on harkinnut TypeScript-tukea alusta alkaen, mikä mahdollistaa paremman tyyppipäätelmän ja editorin tuen kehitettäessä TypeScriptillä.
• Modulaarinen: Pinian avulla voit jakaa tilan useisiin kauppoihin, ja jokainen kauppa voi itsenäisesti hallita omaa tilaansa ja logiikkaansa.
• Composite API -yhteensopiva: Pinia on täydellisesti integroitu Vue 3:n Composition API:n kanssa, mikä tekee tilanhallinnan ja komponenttilogiikan erottamisesta luonnollisempaa.
• Aikamatkailun virheenkorjaus: Pinia tarjoaa aikamatkustusvirheenkorjausominaisuudet, joiden avulla kehittäjät voivat helposti perääntyä ja tarkistaa tilan muutokset.

Pinian käyttöönotto ja käyttö

Aloittaaksesi Pinian käytön, sinun on ensin asennettava Pinia:

npm install pinia

Tai käytä lankaa:

yarn add pinia

Määritä sitten Pinia Vue-sovelluksessasi:

import { createPinia } from 'pinia';
 
const pinia = createPinia();
app.use(pinia);

Luo kauppa:

import { defineStore } from 'pinia';
 
export const useCounterStore = defineStore('counter', () => {
    const count = ref(0);
 
    function increment() {
        count.value++;
    }
 
    return { count, increment };
});

Käytä kauppaa komponentissa:

<script setup>
import { useCounterStore } from '@/stores/counter';
 
const counterStore = useCounterStore();
</script>
 
<template>
    <div>
        <p>Count: {{ counterStore.count }}</p>
        <button @click="counterStore.increment">Increment</button>
    </div>
</template>

Pinia integrointi komponenttien kanssa

Pinian integrointi komponentteihin on hyvin yksinkertaista, pääasiassa läpidefineStore toiminto myymälän luomiseksi. Komponenteissa voit käyttää suoraan tilaa ja menetelmiä myymälässä:

<template>
    <div>
        <p>Count: {{ count }}</p>
        <button @click="increment">Increment</button>
    </div>
</template>
 
<script setup>
import { useCounterStore } from '@/stores/counter';
 
 
const counterStore = useCounterStore();
const { count, increment } = storeToRefs(counterStore);
//如果这里不使用storeToRefs会丢失响应式特性
</script>

Yllä olevassa esimerkissä pääsemme suoraan malliincountnäyttääksesi laskurin arvon ja kutsuaksesi sitä painikkeen napsautustapahtumassaincrementMenetelmä laskurin arvon kasvattamiseksi.

Vue 3:n ainutlaatuinen viestintämenetelmä

Tarjoa/Pistä

Provide/Injectin peruskäyttö
Vue 3:ssaprovidejainjectSe on viestintämenetelmä vanhempien ja alikomponenttien välillä, jonka avulla esi-isäkomponentti voi lisätä riippuvuuden kaikkiin jälkeläiskomponentteihinsa riippumatta siitä, kuinka syvä komponenttihierarkia on.

• antaa tietoja: Esivanhempien komponenttien käyttöprovideToiminnot antavat tietoa.
• Lisää tiedot: jälkeläisten komponenttien käyttämäinjectToiminto syöttää tietoja.

Sovellettavat skenaariot tarjoamiseen/ruiskeeseen
providejainjectKoskee seuraavia skenaarioita:

• Kun haluat välttää useiden kerrosten läpikäymisenpropstietoja siirrettäessä.
• Kun haluat useiden komponenttipuun komponenttien jakavan tietoja.

Esimerkkikoodi：

// 祖先组件
export default {
  setup() {
    const message = 'Hello from Ancestor!';
    provide('message', message);
  }
}
 
// 子孙组件
export default {
  setup() {
    const message = inject('message');
    return { message };
  }
}

Teleportoi

Teleportin käsite ja käyttö
TeleportSe on Vue 3:een lisätty uusi sisäänrakennettu komponentti, jonka avulla voit "lähettää" osan komponentin sisällä olevasta mallista mihin tahansa muuhun DOM:n sijaintiin.

Teleportin käyttäminen komponenttiviestintään
Teleport Sitä ei käytetä komponenttien väliseen viestintään, vaan komponenttien renderöintipaikan ohjaamiseen.mutta voit käyttääTeleportErityinen viestintämenetelmä saavutetaan renderöimällä komponentin osat pääkomponentin DOM:iin.

Esimerkkikoodi：

<!-- 父组件 -->
<template>
  <div>
    <Teleport to="body">
      <ChildComponent />
    </Teleport>
  </div>
</template>
 
<!-- 子组件 -->
<template>
  <div>Some content</div>
</template>

Koostumus API

Composition API:n esittely
Vue 3 esittelee Composition API:n, joka tarjoaa uuden tavan organisoida ja käyttää uudelleen logiikkaa.kulkeasetupToiminnot antavat kehittäjille mahdollisuuden hallita komponenttien reagointitilaa ja elinkaarta joustavammin.

Käytä ref:tä ja reaktiivista komponenttien väliseen viestintään
refjareactiveSe on Compposition API:n työkalu reagoivan tiedon luomiseen.

• refReaktiiviset viittaukset perustietotyyppien luomiseen.
• reactiveReaktiivinen viite objektityyppien luomiseen.

Tarjoa ja lisää Composition API:ssa
Composition API:ssaprovidejainjectsallittusetupKäytetään toiminnoissa komponenttien välisen viestinnän saavuttamiseksi.

Esimerkkikoodi：

// 祖先组件
import { provide } from 'vue';
 
export default {
  setup() {
    const message = ref('Hello from Ancestor!');
    provide('message', message);
  }
}
 
// 子孙组件
import { inject } from 'vue';
 
export default {
  setup() {
    const message = inject('message');
    return { message };
  }
}

Näiden ainutlaatuisten Vue 3:n viestintämenetelmien avulla kehittäjät voivat joustavammin järjestää komponenttien välistä viestintää ja parantaa koodin ylläpidettävyyttä ja uudelleenkäytettävyyttä.

Tee yhteenveto

Vue 3 esittelee Composition API:n, joka tuo komponenttiviestintään uutta joustavuutta ja tehokkaita ominaisuuksia. Komponenttiviestintä on avain monimutkaisten käyttöliittymien rakentamiseen käyttöliittymäkehityksessä. Se sisältää tiedonsiirron ja tapahtumien laukaisemisen ylä- ja lapsikomponenttien, sisarkomponenttien sekä esi- ja jälkeläisten komponenttien välillä. Vue 3 tarjoaa erilaisia ​​viestintämenetelmiä, mukaan lukien perinteiset props and emit -sovellukset sekä uuden Provide/Inject-, Teleport- ja Composition API:n.

Suositeltu aiheeseen liittyvä tieto

• Vue 3:n virallinen dokumentaatio： Vue.js - Progressiivinen JavaScript-kehys | Vue.js- Virallinen dokumentaatio on arvovaltaisin resurssi Vue 3:n oppimiseen, mukaan lukien yksityiskohtaiset oppaat ja API-viitteet.
• Vue.js 3 Composition API opetusohjelma： Composition API UKK | Vue.js- Virallinen Composition API -opastus, jonka avulla pääset alkuun nopeasti.
• Pinia viralliset asiakirjat： Pinia | Intuitiivinen Vue.js-kauppa- Jos aiot käyttää Piniaa valtionhallinnossa, Pinian virallinen dokumentaatio on paras oppimisresurssi.
• Vue.js-tekniikka paljastettiin：Esipuhe |. Vue.js-tekniikka paljastettiin- Tämä on projekti, joka analysoi syvällisesti Vue.js:n sisäistä mekanismia, joka auttaa ymmärtämään, miten Vue toimii.

Luominen ei ole helppoa Jos tämä artikkeli auttaa sinua, voitko antaa minulle tykkäyksen?