Κοινή χρήση τεχνολογίας

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

εισαγωγή

Το Vue 3 εισάγει το Composition API, το οποίο φέρνει νέα ευελιξία και δύναμη στην επικοινωνία στοιχείων.

Βασικά στοιχεία επικοινωνίας εξαρτημάτων

Ορισμός και λειτουργία εξαρτημάτων

Στην ανάπτυξη front-end, τα στοιχεία μπορούν να θεωρηθούν ως ανεξάρτητες μονάδες που δημιουργούν μια διεπαφή χρήστη. Ενσωματώνει συγκεκριμένες λειτουργίες και στυλ, μπορεί να επαναχρησιμοποιηθεί και μπορεί να αναπτυχθεί και να δοκιμαστεί ανεξάρτητα από άλλα μέρη. Η κύρια λειτουργία των εξαρτημάτων είναι να βελτιώνουν την επαναχρησιμοποίηση κώδικα, τη δυνατότητα συντήρησης και την επεκτασιμότητα. Διαχωρίζοντας τη διεπαφή σε πολλαπλά στοιχεία, οι προγραμματιστές μπορούν να διαχειριστούν πιο εύκολα σύνθετες εφαρμογές και κάθε στοιχείο μπορεί να βελτιστοποιηθεί για να βελτιώσει τη συνολική απόδοση ανάπτυξης και την απόδοση της εφαρμογής.

Σχέση δέντρου συστατικού και συστατικού γονέα-παιδιού

Σε πλαίσια διεπαφής όπως το Vue.js, τα στοιχεία μπορούν να ενσωματωθούν για να σχηματίσουν ένα δέντρο συστατικών. Σε αυτήν τη δομή δέντρου, κάθε συστατικό μπορεί να έχει υποσυστατικά, και αυτά τα υποσυστατικά μπορούν να έχουν τα δικά τους υποσυστατικά, σχηματίζοντας μια ιεραρχική δομή. Αυτή η δομή καθιστά σαφή τη σχέση μεταξύ των στοιχείων και διευκολύνει τη διαχείριση και τη συντήρηση.

• Σχέση συστατικού γονέα-παιδιού : Στο δέντρο συνιστωσών, ένα στοιχείο μπορεί να δημιουργήσει ένα άλλο στοιχείο. Τα γονικά στοιχεία μπορούν να περάσουν δεδομένα και μεθόδους σε θυγατρικά στοιχεία και τα θυγατρικά στοιχεία μπορούν να στείλουν πληροφορίες στα γονικά στοιχεία μέσω συμβάντων. Αυτή η σχέση γονέα-παιδιού είναι η βάση για την επικοινωνία των συνιστωσών.
• Σχέση αδερφικού συστατικού : Πολλαπλά θυγατρικά στοιχεία κάτω από το ίδιο γονικό στοιχείο είναι σχέσεις αδελφών συστατικών. Τα αδερφικά εξαρτήματα δεν μπορούν να επικοινωνήσουν απευθείας μεταξύ τους και η επικοινωνία μεταξύ τους συνήθως χρειάζεται να αναμεταδοθεί μέσω του μητρικού στοιχείου.
• Σχέσεις συστατικών προγόνων και απογόνων : Στο δέντρο συνιστώσας, το γονικό στοιχείο του γονικού στοιχείου είναι το στοιχείο προγονικό και το θυγατρικό στοιχείο του θυγατρικού στοιχείου είναι το συστατικό απόγονος. Αυτή η σχέση είναι ιδιαίτερα σημαντική όταν έχουμε να κάνουμε με βαθιά ένθετα εξαρτήματα.

Οι έννοιες των δέντρων συστατικών και των σχέσεων συστατικών γονέα-παιδιού είναι ζωτικής σημασίας για την κατανόηση της επικοινωνίας συστατικών. Η γνώση αυτών των βασικών γνώσεων μπορεί να βοηθήσει τους προγραμματιστές να σχεδιάσουν και να εφαρμόσουν μηχανισμούς επικοινωνίας μεταξύ των στοιχείων πιο αποτελεσματικά.

Επικοινωνία στοιχείου γονέα-παιδιού (Τόμος 3)

Ο γονέας μεταβιβάζει δεδομένα στο παιδί (Props)

Τι είναι τα στηρίγματα
Τα στηρίγματα είναι ένας μηχανισμός για τα γονικά στοιχεία για τη μεταβίβαση δεδομένων στα θυγατρικά στοιχεία.Στο Vue 3, χρησιμοποιήστεdefinePropsΤο API χρησιμοποιείται για να δηλώσει τα στηρίγματα λήψης, τα οποία διατηρούν τη μονόδρομη ροή δεδομένων και διασφαλίζουν την ανεξαρτησία και την επαναχρησιμοποίηση των στοιχείων.

Πώς να μεταβιβάσετε στηρίγματα στο γονικό στοιχείο
Στο πρότυπο του γονικού στοιχείου, χρησιμοποιήστεv-bindή συντομογραφία:Για δέσμευση δεδομένων:

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

εδώ,:my-propΥποδεικνύει ότι πρόκειται για ένα δυναμικά δεσμευμένο στηρίγμα,parentDataΕίναι τα δεδομένα που ορίζονται στο γονικό στοιχείο。

Πώς να λάβετε στηρίγματα στο παιδικό στοιχείο
Στο παιδί εξάρτημα, χρησιμοποιήστεdefinePropsΓια να δηλώσετε τα ληφθέντα στηρίγματα:

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

υπάρχει<script setup>Στη συντακτική ζάχαρη,definePropsΘα εκθέσει αυτόματα τα στηρίγματα ως ιδιότητες απόκρισης του στοιχείου。

Το παιδί μεταβιβάζει το συμβάν στον γονέα (Emit)

τι εκπέμπεται
Το Emit είναι ένας μηχανισμός για τα θυγατρικά στοιχεία να στέλνουν μηνύματα στα γονικά στοιχεία.Στο Vue 3, χρησιμοποιήστεdefineEmitsAPI για τη δήλωση συμβάντων που μπορούν να εκπέμπονται και να χρησιμοποιηθούνemitλειτουργία για την ενεργοποίηση συμβάντων.

Τρόπος ενεργοποίησης συμβάντος σε θυγατρικό στοιχείο
Στη μέθοδο του παιδιού συστατικού, χρησιμοποιήστε defineEmits για να δηλώσετε συμβάντα που μπορούν να εκπέμπονται και να χρησιμοποιήσετε emit να πυροδωτήσει:

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

defineEmitsχρησιμοποιείται για να δηλώσει συμβάντα που μπορεί να εκπέμψει ένα στοιχείο, ενώemitΟι συναρτήσεις χρησιμοποιούνται για την ενεργοποίηση αυτών των συμβάντων.

Πώς να ακούσετε συμβάντα θυγατρικού στοιχείου στο γονικό στοιχείο
Στο πρότυπο του γονικού στοιχείου,χρήσηv-onή συντομογραφία@ Για να ακούσετε συμβάντα που εκπέμπονται από θυγατρικά στοιχεία:

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

εδώ,@my-eventΥποδεικνύει ότι το υποσυστατικό ακρόασης εκπέμπειmy-eventΕκδήλωση,handleEventΕίναι μια μέθοδος που ορίζεται στο γονικό στοιχείο Όταν ενεργοποιείται το συμβάν, αυτή η μέθοδος θα καλείται.

Περιεκτικό παράδειγμα

Ας υποθέσουμε ότι υπάρχει ένα γονικό στοιχείοParentComponentκαι ένα υποσυστατικόChildComponent, το γονικό στοιχείο πρέπει να μεταβιβάσει δεδομένα στο θυγατρικό στοιχείο και το θυγατρικό στοιχείο πρέπει να ειδοποιήσει το γονικό στοιχείο μετά από μια συγκεκριμένη λειτουργία.

μητρικό συστατικόParentComponent.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>

ΥποσυναρμολόγησηChildComponent.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>

Σε αυτό το παράδειγμα, περνάει το γονικό στοιχείο:my-propΠεράστε δεδομένα σε θυγατρικά στοιχεία και περάστε@child-event Ακούστε συμβάντα που εκπέμπονται από θυγατρικά στοιχεία.περάσματα θυγατρικού στοιχείουdefinePropsΛαμβάνει το περιεχόμενο που διαβιβάστηκε από το γονικό στοιχείοmyPropκαι χρησιμοποιήστε το στο συμβάν κλικ στο κουμπίemitΑποστολή δεδομένων στο γονικό στοιχείο.

Χρήση Pinia (κρατική βιβλιοθήκη διαχείρισης για το Vue 3)

Πλεονεκτήματα και χαρακτηριστικά του Pinia

Το Pinia είναι η επίσημα προτεινόμενη βιβλιοθήκη διαχείρισης κατάστασης για το Vue 3. Παρέχει έναν τρόπο διαχείρισης της κατάστασης εφαρμογής που βασίζεται σε στοιχεία. Ακολουθούν μερικά από τα βασικά πλεονεκτήματα και χαρακτηριστικά του Pinia:

• Component API: Η Pinia υιοθετεί API που βασίζεται σε στοιχεία, καθιστώντας πιο φυσικό τον διαχωρισμό της διαχείρισης κατάστασης και της λογικής στοιχείων.
• Υποστήριξη TypeScript: Η Pinia εξέτασε την υποστήριξη TypeScript από την αρχή, επιτρέποντας καλύτερη εξαγωγή συμπερασμάτων τύπων και υποστήριξη επεξεργασίας κατά την ανάπτυξη με TypeScript.
• Modular: Το Pinia σάς επιτρέπει να χωρίσετε την πολιτεία σε πολλά καταστήματα και κάθε κατάστημα μπορεί να διαχειριστεί ανεξάρτητα τη δική του κατάσταση και λογική.
• Συμβατό Composite API: Το Pinia είναι τέλεια ενσωματωμένο με το Composition API του Vue 3, καθιστώντας πιο φυσικό τον διαχωρισμό της διαχείρισης κατάστασης και της λογικής στοιχείων.
• Αποσφαλμάτωση ταξιδιού στο χρόνο: Το Pinia παρέχει δυνατότητες εντοπισμού σφαλμάτων για ταξίδια στο χρόνο, επιτρέποντας στους προγραμματιστές να κάνουν εύκολα πίσω και να επιθεωρούν τις αλλαγές κατάστασης.

Πώς να ρυθμίσετε και να χρησιμοποιήσετε το Pinia

Για να ξεκινήσετε να χρησιμοποιείτε το Pinia, πρέπει πρώτα να εγκαταστήσετε το Pinia:

npm install pinia

Ή χρησιμοποιήστε Νήματα:

yarn add pinia

Στη συνέχεια, ρυθμίστε το Pinia στην εφαρμογή Vue:

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

Δημιουργήστε ένα κατάστημα:

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

Χρήση αποθήκευσης στο εξάρτημα:

<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 με εξαρτήματα

Η ενσωμάτωση του Pinia με εξαρτήματα είναι πολύ απλή, κυρίως μέσωdefineStore λειτουργία για τη δημιουργία καταστήματος. Στα στοιχεία, μπορείτε να χρησιμοποιήσετε απευθείας την κατάσταση και τις μεθόδους στο κατάστημα:

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

Στο παραπάνω παράδειγμα, έχουμε πρόσβαση απευθείας στο πρότυποcountγια να εμφανίσετε την τιμή του μετρητή και να την καλέσετε στο συμβάν κλικ στο κουμπίincrementΜέθοδος για την αύξηση της τιμής του μετρητή.

Vue 3 μοναδική μέθοδος επικοινωνίας

Παροχή/Ένεση

Βασική χρήση του Provide/Inject
Στην Vue 3,provideκαιinjectΕίναι μια μέθοδος επικοινωνίας μεταξύ γονικών και θυγατρικών συστατικών που επιτρέπει σε ένα προγονικό συστατικό να εισάγει μια εξάρτηση σε όλα τα συνιστώσα απόγονό του, ανεξάρτητα από το πόσο βαθιά είναι η ιεραρχία των συστατικών.

• παρέχουν δεδομένα: Χρήση προγονικού εξαρτήματοςprovideΟι συναρτήσεις παρέχουν δεδομένα.
• Εισάγετε δεδομένα: χρησιμοποιείται από επιγονικά συστατικάinjectΗ συνάρτηση εισάγει δεδομένα.

Ισχύοντα σενάρια για Παροχή/Ένεση
provideκαιinjectΙσχύει για τα ακόλουθα σενάρια:

• Όταν θέλετε να αποφύγετε να περάσετε από πολλαπλά επίπεδαpropsκατά τη διαβίβαση δεδομένων.
• Όταν θέλετε πολλά στοιχεία στο δέντρο συστατικών να μοιράζονται δεδομένα.

Δείγμα κώδικα：

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

Teleport

Η έννοια και η χρήση του Teleport
TeleportΕίναι ένα νέο ενσωματωμένο στοιχείο που προστέθηκε στο Vue 3, το οποίο σας επιτρέπει να "μεταδώσετε" ένα μέρος του προτύπου μέσα σε ένα στοιχείο σε οποιαδήποτε άλλη θέση στο DOM.

Πώς να χρησιμοποιήσετε το Teleport για επικοινωνία στοιχείων
Teleport Δεν χρησιμοποιείται για την επικοινωνία μεταξύ εξαρτημάτων, αλλά για τον έλεγχο της θέσης απόδοσης των εξαρτημάτων.αλλά μπορείτε να χρησιμοποιήσετεTeleportΜια ειδική μέθοδος επικοινωνίας επιτυγχάνεται με την απόδοση τμημάτων ενός στοιχείου στο DOM του γονικού στοιχείου.

Δείγμα κώδικα：

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

API σύνθεσης

Εισαγωγή στο Composition API
Το Vue 3 εισάγει το Composition API, το οποίο παρέχει έναν νέο τρόπο οργάνωσης και επαναχρησιμοποίησης της λογικής.πέρασμαsetupΟι λειτουργίες επιτρέπουν στους προγραμματιστές να ελέγχουν πιο ευέλικτα την κατάσταση απόκρισης και τον κύκλο ζωής των εξαρτημάτων.

Χρησιμοποιήστε το ref και το reactive για επικοινωνία μεταξύ των συστατικών
refκαιreactiveΕίναι ένα εργαλείο στο Composition API για τη δημιουργία αποκριτικών δεδομένων.

• refΑντιδραστικές αναφορές για τη δημιουργία βασικών τύπων δεδομένων.
• reactiveΑντιδραστική αναφορά για τη δημιουργία τύπων αντικειμένων.

Χρήση παροχής και ένεσης στο Composition API
Στο Composition API,provideκαιinjectεπιτρεπόμενοςsetupΧρησιμοποιείται σε λειτουργίες για την επίτευξη επικοινωνίας μεταξύ συστατικών.

Δείγμα κώδικα：

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

Μέσω αυτών των μοναδικών μεθόδων επικοινωνίας του Vue 3, οι προγραμματιστές μπορούν να οργανώσουν πιο ευέλικτα την επικοινωνία μεταξύ των στοιχείων και να βελτιώσουν τη δυνατότητα συντήρησης και επαναχρησιμοποίησης του κώδικα.

Συνοψίζω

Το Vue 3 παρουσιάζει το Composition API, το οποίο φέρνει νέα ευελιξία και ισχυρά χαρακτηριστικά στην επικοινωνία στοιχείων. Η επικοινωνία εξαρτημάτων είναι το κλειδί για τη δημιουργία πολύπλοκων διεπαφών χρήστη στην ανάπτυξη του μπροστινού μέρους. Περιλαμβάνει μεταφορά δεδομένων και ενεργοποίηση γεγονότων μεταξύ γονικών και θυγατρικών στοιχείων, αδερφικών στοιχείων και προγονικών και απογόνων. Το Vue 3 παρέχει μια ποικιλία μεθόδων επικοινωνίας, συμπεριλαμβανομένων των παραδοσιακών στηρίξεων και εκπομπών, καθώς και του νέου API Παροχής/Εγχύσεως, Τηλεμεταφοράς και Σύνθεσης.

Προτεινόμενες σχετικές πληροφορίες

• Επίσημη τεκμηρίωση Vue 3： Vue.js - Το προοδευτικό πλαίσιο JavaScript | Vue.js- Η επίσημη τεκμηρίωση είναι η πιο έγκυρη πηγή για την εκμάθηση του Vue 3, συμπεριλαμβανομένων λεπτομερών οδηγών και αναφορών API.
• Οδηγός Vue.js 3 Composition API： Συχνές ερωτήσεις για το API σύνθεσης | Vue.js- Επίσημο εκπαιδευτικό πρόγραμμα Composition API για να σας βοηθήσει να ξεκινήσετε γρήγορα.
• Επίσημη τεκμηρίωση Pinia： Πίνια | Το διαισθητικό κατάστημα για το Vue.js- Εάν σκοπεύετε να χρησιμοποιήσετε την Pinia για κρατική διαχείριση, η επίσημη τεκμηρίωση της Pinia είναι η καλύτερη πηγή εκμάθησης.
• Αποκαλύφθηκε η τεχνολογία Vue.js：Πρόλογος |. Αποκαλύφθηκε η τεχνολογία Vue.js- Πρόκειται για ένα έργο που αναλύει σε βάθος τον εσωτερικό μηχανισμό του Vue.js, ο οποίος βοηθά στην κατανόηση του τρόπου λειτουργίας του Vue.

Η δημιουργία δεν είναι εύκολη Εάν αυτό το άρθρο σας βοηθήσει, μπορείτε να μου δώσετε ένα like;