Zusammenfassung und Beispiele der Kommunikationsmethoden für Vue3-Komponenten

<child :msg2="msg2" />
<Skript-Setup>
    const props = defineProps({
        //Schreibe Methode 1 msg2:String
        //Methode 2 schreiben msg2:{
            Typ: Zeichenfolge,
            Standard:''
        }
    })
    console.log(props) // {msg2:'Dies sind die Informationen der Unterkomponente 2'}
</Skript>

//Kind.vue
<Vorlage>
    //Methode 1 schreiben <div @click="emit('myclick')">button</div>
    //Methode 2 schreiben <div @click="handleClick">button</div>
</Vorlage>
<Skript-Setup>
    // Methode 1 const emit = defineEmits(['myClick'],['myClick2'])
    // Methode 2 const handleClick = () => {
        emit('myClick','Dies sind die Informationen, die an die übergeordnete Komponente gesendet werden');
     }
      
     // Methode 2 ist nicht auf vue3.2 anwendbar, die Verwendung von useContext() wurde aufgegeben import { useContext } from 'vue'
     const { emit } = useContext()
     const handleClick = () => { 
      emit('myClick','Dies sind die Informationen, die an die übergeordnete Komponente gesendet werden'   
     }
</Skript>
 
// Parent.vue antwortet auf <template>
    <child @myClick="onMyClick"></child>
</Vorlage>
<Skript-Setup>
    Kind aus „./child.vue“ importieren
    importiere onMychilk = (msg) => {
        console.log(msg) // Von der übergeordneten Komponente empfangene Informationen}
</Skript>

<Skript-Setup>
    // Methode 1: useContext() wurde seit vue3.2 aufgegeben import { useContext } from 'vue'
    const ctx = useContext()
    // Extern verfügbar gemachte Eigenschaften und Methoden können ctx.expose({
        childName: 'Dies ist die Eigenschaft der untergeordneten Komponente',
        irgendeineMethode(){
        console.log('Dies ist die Methode der untergeordneten Komponente')
        }
    })
</Skript>
 
// Parent.vue Hinweis ref="comp"
<Vorlage>
    <child ref="comp"></child>
    <button @click="handleClick">Schaltfläche</button>
</Vorlage>
<Skript>
    Kind aus „./child.vue“ importieren
    importiere { ref } von 'vue' 
    const comp = ref(null)
    const handleClick = () => {
        Konsole.log(comp.value.childName)
        comp.value.someMethod() //Rufen Sie die von der Unterkomponente bereitgestellte Methode auf}
</Skript>

// Übergeordnete Komponente <child :msg1="msg1" :msg2="msg2" title="3333"></child>
<Skript-Setup>
    Kind aus „./child.vue“ importieren
    importiere { ref,reactive } von 'vue
    const msg1 = ref('111')
    const msg2 = ref('222')
</Skript>
 
// Unterkomponente <script setup>
    importiere { defineProps, useContext, useAttars } von 'vue'
    const props = defineProps({
        msg1: Zeichenfolge
    })
     
    // Methode 1
    const ctx = useContext()
    console.log(ctx.attars) // {msg2:'222',title:'333'}
     
    // Methode 2 
    const attrs = useAttrs()
    console.log(attars) // {msg2:'2222',title:'3333'}
</Skript>

<child v-model:key="Schlüssel" v-modle:value="Wert" />
<Skript>
    Kind aus „./child.vue“ importieren
    importiere { ref, reactive } von 'vue'
    Konstantschlüssel = ref('111')
    konstanter Wert = ref('222')
</Skript>
 
//Unterkomponente <Vorlage>
   <button @click="handleClick"></button>
</Vorlage>
<Skript-Setup>
    // Methode 1 v3.2 wurde entfernt import { useContext } from 'vue'
    const { emit } = useContext()
     
    // Methode 2import { defineEmits } von 'vue'
    const emit = defineEmits(['Schlüssel','Wert'])
     
    // Verwendung const handleClick = () => {
        emittieren('update:key','neuer Schlüssel')
        emit('update:value','neuer Wert')
    }
</Skript>

// Übergeordnete Komponente <Skript-Setup>
    importiere { provide } von 'vue'
    const name = bereitstellen('name')
    console.log('Name','Muhua')
</Skript>
//Unterkomponente <Skript-Setup>
    importiere { inject } von 'vue'
    const name = injizieren('name')
    console.log(Name) //Muhua</script>

//store/index.js
importiere { createStore } von 'vuex'
exportiere Standard createStore({
    Status: {Anzahl: 1},
    Getter: {
        getCount:state=>state.count
    },
    Mutationen:
        hinzufügen(Zustand){
            Zustand.Anzahl++
        }
    }
   })
 // Haupt.js
 importiere { createApp } von 'vue'
 APP aus „./App.vue“ importieren
 Store aus „./store“ importieren
 erstelleApp(APP).verwenden(speichern).mount("#app")
  
 // <template> direkt verwenden
     <div>
         {{ $store.state.count }}
     </div>
     <button @click="$store.commit('hinzufügen')">
     </button>
 </Vorlage>
  
 // <Skript-Setup> abrufen
     importiere { useStore,compute } von 'vuex'
     const store = useStore()
     Konsole.log(Speicher.Status.Anzahl)
      
     Konstante Anzahl = berechnet (()=>store.state.count)
     console.log(Anzahl)
 </Skript>

mitt.js
Fausthandschuh aus 'Fausthandschuh' importieren
const mitt = mitt()
Standard-Fausthandschuh exportieren

// Komponente A 
<Skript-Setup>
    importiere mitt von './mitt'
    const handleClick = () => {
        mitt.emit('Änderungshandle')
    }
</Skript>
// Komponente B 
<Skript-Setup>
importiere mitt von './mitt'
importiere { onUnmount } von 'vue'
const einigeMethode = () => {...}
mitt.on('handleChange',irgendeineMethode)
beiNichteingehängt(()=>{
    mitt.off('Änderung handhaben',eineMethode)
})
</Skript>