Technology sharing

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

introductio

Vue 3 Compositionem API inducit, quae novam flexibilitatem et potentiam ad communicationem componentium affert.

Component communicationis basics

Definitio et functio partium

Ante-finem evolutionis partes possunt cogitari de unitatibus independentibus quae interfaciem usoris construunt. Encapsulat functiones specificas et stilos, reddi potest, explicari et examinari sine aliis partibus potest. Praecipua partium partium munus est ad meliorem codicem reusability, conservabilitas et scalabilitas. Scindo interface in plures partes, tincidunt facilius complexum applicationes administrare possunt, et unaquaeque pars optimized est ut altiore progressione evolutionis efficacia et applicatione effectus emendare possit.

Lignum elementum et parentem-parens necessitudinem componentes

Artificia ante-finem sicut Vue.js, partes nidificari possunt ad formam arboris componentis. In hac arbore structurae singulae componentes sub-componentes habere possunt, et hi sub-componentes suas sub-componentes habere possunt, structuram hierarchicam efformantes. Haec structura relationem inter partes claram reddit et administrationem et sustentationem faciliorem reddit.

• Parentis-puer pars necessitudinem : In arbore componente, pars alia componentis creare potest. Parens components potest notitias et modos ad puerum elementa transire, et puer elementa mittere possunt notitias ad parentem per eventus elementa. Haec relatio infantis parentis fundamentum est communicationis componentis.
• Fratrem fratrem componentis necessitudinem : Multiplices pueri partes sub eodem parente componente sunt relationes germanorum componentium. Sibling partes non possunt directe inter se communicare, et communicatio inter eos plerumque indiget ut per elementum parentis indicetur.
• Antecessor et abneptis relationes componentes : In arbore componente, pars parentis est componentis antecessoris componentis, et puer pars prolis componentia est abneptis. Haec relatio maxime momenti est in tractando cum componentibus penitus nested.

Notiones arborum componentium et relationes parentium componentium cruciabiles sunt ad communicationem componentium cognoscendam. Has scientias fundamentales domito adiuvare possunt tincidunt ad designandum et machinationes communicationis efficiendas inter partes efficacius.

Parentis pueri communicationis componentes (Vue III)

Parentis notitia transit ad puerum (Props)

Quid adminicula
Adminicula sunt mechanisma ad elementa ad parentem tradendum data ad puerum pertinentia.In Vue 3, uteredefinePropsAPI declarare consuevit adminicula recipiendi, quae unum-via notitiarum fluxum conservat et independentiam et reusability componentium praestat.

Quomodo adminicula in parente component?
In forma parentis component, uterev-bindaut abbreviationem:Data ligare:

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

hic,:my-propHoc est propositum dynamice ligatum;parentDataData est in parente componente definitur。

Quomodo accipere adminicula in puero component?
In pueri componentibus, uteredefinePropsAcceptum declarare adminicula:

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

exist<script setup>In saccharo syntactico,definePropsEt sponte adminicula exponere responsurum proprietates componentium。

Puer transit eventum ad parentem (Emit)

quid emit?
Emittere est mechanismum pro puero componentium mittere nuntios ad partes parentis.In Vue 3, uteredefineEmitsAPI ad declarandum res emitti possunt, et utereemitmunus ad trigger certe.

Quam ad trigger eventu in puero component
In modum pueri componentis, utere defineEmits declarare eventus qui emitti possunt, et utere emit ad trigger:

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

defineEmitsadhibetur ad declarandum quod pars emittere potest, dumemitMunera his eventibus felis adhibentur.

Quomodo audire puerum eventus componentes in parente component?
in the template of the parentis component;ususv-onaut abbreviationem@ Ad audiendas res emissas a puero compositas;

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

hic,@my-eventIndicat audientem subcomponent emitsmy-eventeventus,handleEventModus definitus est in parente componente.

Comprehensive exemplum

Id est a parente componentParentComponentet subcomponentChildComponent, pars parentis notitias ad puerum componentem transmittere debet, et puer componentia parentem post specificam operationem certiorem facere debet.

parens componentParentComponent.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>

SubassemblyChildComponent.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>

In hoc exemplo transiens elementum parentis:my-propTransi notitia ad puerum components et pass@child-event Certe audi tium infantum emittitur.puer pars transitdefinePropsContentum accipit a parente transierunt componentmyPropatque uti in eventu strepita strepitaemitMitte ad parens pars notitia.

Using Pinia (administration library state for Vue 3)

Pinia commoda et lineamenta

Pinia est bibliotheca administratione publica publice commendata pro Vue 3. Praebet viam componentis fundatam ad applicationem status administrandi. Hic nonnulla sunt clavium utilitates et lineamenta Piniae:

• Component API: Pinia adoptat API component-fundatur, disjunctionem administrationis status et logicam componentium naturalem magis facit.
• TypeScript auxilium: Pinia TypeScript subsidium ab initio consideravit, ut melioris generis coniecturam et editor subsidium cum enucleando in TypeScript.
• Modular: Pinia permittit ut statum in plures thesauros scindat, et unaquaeque copia independenter suum statum et logicam administrare possit.
• Compositum API compatible: Pinia perfecte integrata est cum Compositione API de Vue III, faciens separationem administrationis status et logicae componentis magis naturalem.
• Tempus peregrinatione debugging: Pinia tempus praebet facultatem peregrinatione debugging, tincidunt ut facile commodat et mutationes status inspiciat.

Quomodo statuatur et utatur Pinia?

Ut Pinia utere incipias, primum debes Piniam instituere;

npm install pinia

Vel uti tinctum;

yarn add pinia

Deinde pone Piniam in applicatione tua Vue;

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

Copiam crea:

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

Copia usus in componentibus:

<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 integratio cum components

Pinia integratio cum componentibus est valde simplex, maxime perdefineStore munus facere copia. In componentibus, publica ac methodi in copia directe uti potes;

<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>

In exemplo praecedente directe accedimus in templatecountut ostenderet valorem calculonis appellant in felis click eventumincrementModus ad valorem contra incrementum.

Vue 3 unique communicationis modus

Provide / Inject

Basic usus est Provide / Inject
In Vue 3,provideetinjectEst methodus communicationis inter parentem et puerum, quae antecessori admittit ut dependentiam in omnes partes suas injiciat, quantumvis altae hierarchiae componentis.

• providere notitia: Antecessoris componentis ususprovideMunera praebent data.
• Inject notitia: used by descendat componentsinjectMunus infundit data.

Applicatur missionibus ad Provide / Inject
provideetinjectIta convenit his missionibus;

• Cum vis vitare per plures stratispropscum obiter data.
• Cum vis multa elementa in arbore componente communicare data.

Sample code：

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

Ianuae

De intellectu et usu Ianuae
TeleportNovum constructum-in component in Vue 3 est quod te permittit ut "transmittere" partem Formulae intra componentem ad alium locum in DOM.

Quomodo uti Ianuae communicationis componentes
Teleport Non ad communicationem inter partes adhibetur, sed ad moderandam positionem partium reddendam.sed uti potesTeleportPeculiaris modus communicationis obtinetur reddendo partes componentis in dommo parentis.

Sample code：

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

Compositio API

Introductio ad Compositionem API
Vue 3 Compositionem API inducit, quae novam methodum ad logicam et reuse componendam praebet.passsetupMunera permittunt tincidunt mollius moderari statum responsivum et cyclum vitae componentium.

Usus ref et reciprocus pro communicationis inter-componentis
refetreactiveInstrumentum est in Compositione API ad datam responsivam creandam.

• refReactivum references ad partum basic notitia genera.
• reactiveReactivum respectum ad partum objectum genera.

Usura praebere et injicere in compositione API
In compositione API,provideetinjectlicitasetupAdhibentur in muneribus ad communicationem crucis-componentis consequendam.

Sample code：

// 祖先组件
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 };
  }
}

Per has rationes unicas communicationis Vue III, tincidunt magis communicationem inter partes componere mollius possunt et ad conservabilitatem ac reusability codicis emendare.

Summatim

Vue 3 Compositionem API inducit, quae novas flexibilitates et validas notas ad communicationem componentium affert. Communicatio pars est clavis ad usorem complexum aedificandi interfacies ante-finem evolutionis. Involvit notitias translationis et eventus excitat inter partes parentem et puerum, partes germanos, et antecessorem et descendentem. Vue 3 varios modos communicationis praebet, inter adminicula et emittunt traditional, necnon novam Provide/Inject, Ianuae et Compositionis API.

Commendatur related notitia

• Vue 3 officialis documenta： Vue.js - The Progressive JavaScript Framework | Vue.js- Documenta officialis est praestantissima subsidia discendi Vue 3, inter duces distinctos et API indiciorum.
• Vue.js 3 Composition API Tutorial： Composition API FAQ | Vue.js- Official Composition API doceo ut cito incipias adiuvare.
• Pinia documenta publica： Pinia | Copia intuitiva pro Vue.js- Si Pinia administratione rei publicae uti cogitas, documentum officialis Piniae est optima scientiarum subsidia.
• Vue.js technologia revelata：Praefatio |- Hoc consilium est quod machinam internam de Vue.js penitus effingit, quae adiuvat ad intellegendum quomodo Vue opera habeat.

Creatio non est facilis.