12 Arten der Komponentenkommunikation in Vue2

// Parent.vue überträgt <template>
    <child :msg="msg"></child>
</Vorlage>

// Child.vue empfängt Export-Standard {
  //Schreibmethode 1: Verwenden Sie ein Array, um Props zu empfangen: ['msg'],
  // Schreibmethode 2: Verwenden Sie zum Empfangen ein Objekt. Sie können den empfangenen Datentyp begrenzen, einen Standardwert festlegen, überprüfen usw. props:{
      Nachricht:{
          Typ: Zeichenfolge,
          Standard: „Dies sind die Standarddaten“
      }
  },
  montiert(){
      console.log(diese.msg)
  },
}

// Übergeordnetes Element.vue
<Vorlage>
    <child :page.sync="Seite"></child>
</Vorlage>
<Skript>
Standard exportieren {
    Daten(){
        zurückkehren {
            Seite:1
        }
    }
}

// Kind.vue
Standard exportieren {
    Requisiten: ["Seite"],
    berechnet(){
        // Wenn wir currentPage in der untergeordneten Komponente ändern, ändert sich auch die Seite der übergeordneten Komponente currentPage {
            erhalten(){
                diese Seite zurückgeben
            },
            setze(neuerWert){
                dies.$emit("update:page", neuerWert)
            }
        }
    }
}
</Skript>

// Übergeordnetes Element.vue
<Vorlage>
    <child v-model="Wert"></child>
</Vorlage>
<Skript>
Standard exportieren {
    Daten(){
        zurückkehren {
            Wert: 1
        }
    }
}

// Kind.vue
<Vorlage>
    <input :value="Wert" @input="handlerChange">
</Vorlage>
Standard exportieren {
    Requisiten: ["Wert"],
    // Sie können den Ereignisnamen ändern. Der Standardwert ist „input“.
    Modell:{
        Ereignis: „Aktualisierungswert“
    },
    Methoden:{
        handlerChange(e){
            dies.$emit("Eingabe", e.Ziel.Wert)
            // Wenn oben eine Umbenennung steht, sieht diese so aus: $emit("updateValue", e.target.value)
        }
    }
}
</Skript>

// Kind.vue
Standard exportieren {
    Daten(){
        zurückkehren {
            Name:"Muhua"
        }
    },
    Methoden:{
        irgendeineMethode(Nachricht){
            Konsole.log(Nachricht)
        }
    }
}

// Übergeordnetes Element.vue
<Vorlage>
    <Kind ref="Kind"></Kind>
</Vorlage>
<Skript>
Standard exportieren {
    montiert(){
        const Kind = dies.$refs.child
        console.log(child.name) // Muhuachild.someMethod("Die Methode der untergeordneten Komponente wird aufgerufen")
    }
}
</Skript>

// Child.vue Versand Export Standard {
  Daten(){
      return { msg: "Dies ist die Nachricht, die an die übergeordnete Komponente gesendet wurde" }
  },
  Methoden: {
      handleClick(){
          dies.$emit("sendMsg",diese.msg)
      }
  },
}
// Parent.vue antwortet auf <template>
    <child v-on:sendMsg="getChildMsg"></child>
    // oder abgekürzt <child @sendMsg="getChildMsg"></child>
</Vorlage>

Standard exportieren {
    Methoden:{
        getChildMsg(msg){
            console.log(msg) // Dies ist die von der übergeordneten Komponente empfangene Nachricht}
    }
}

// Übergeordnetes Element.vue
<Vorlage>
    <child :name="name" title="1111" ></child>
</Vorlage
Standard exportieren{
    Daten(){
        zurückkehren {
            Name:"Muhua"
        }
    }
}

// Kind.vue
<Vorlage>
    // Mit der Übergabe an die untergeordnete Komponente fortfahren <sun-child v-bind="$attrs"></sun-child>
</Vorlage>
Standard exportieren{
    props:["name"], // Dies kann empfangen oder nicht empfangen werden mounted(){
        // Wenn die Requisiten einen Namen erhalten, ist es { title:1111 }, andernfalls ist es { name:"Muhua", title:1111 }
        konsole.log(dies.$attrs)
    }
}

// Übergeordnetes Element.vue
Standard exportieren{
    montiert(){
        this.$children[0].someMethod() // Ruft die Methode der ersten untergeordneten Komponente auf this.$children[0].name // Ruft die Eigenschaften der ersten untergeordneten Komponente ab }
}

// Kind.vue
Standard exportieren{
    montiert(){
        this.$parent.someMethod() //Rufen Sie die Methode der übergeordneten Komponente auf this.$parent.name //Holen Sie sich die Eigenschaften in der übergeordneten Komponente}
}

// Übergeordnete Komponente exportiert standardmäßig{
    // Methode 1 kann die Methode in den bereitgestellten Methoden nicht abrufen: {
        Name:"Muhua",
        Alter: Eigenschaft in this.data},
    // Methode 2 kann die Attribute in den Daten nicht abrufen provide(){
        zurückkehren {
            Name:"Muhua",
            someMethod:this.someMethod // Methode in Methoden }
    },
    Methoden:{
        irgendeineMethode(){
            console.log("Dies ist die Injektionsmethode")
        }
    }
}

// Abkömmling Komponente export default{
    injizieren:["Name","irgendeineMethode"],
    montiert(){
        console.log(dieser.Name)
        dies.someMethod()
    }
}

// Extrahieren Sie es in eine separate js-Datei Bus.js und importieren Sie es dann bei Bedarf // Bus.js
Vue von „vue“ importieren
exportiere standardmäßig neues Vue()

// Haupt.js
Vue von „vue“ importieren
Vue.prototype.$bus = neues Vue()

// Haupt.js
Vue von „vue“ importieren
neuer Vue({
    el:"#app",
    Daten:{
        Bus: neues Vue()
    }
})

// In der Komponente, die benutzerdefinierte Ereignisse nach außen senden muss <template>
    <button @click="handlerClick">Schaltfläche</button>
</Vorlage>
Bus aus "./Bus.js" importieren
Standard exportieren{
    Methoden:{
        handlerKlick(){
            // Benutzerdefinierter Ereignisname sendMsg
            Bus.$emit("sendMsg", "Dies sind die nach außen zu sendenden Daten")
        }
    }
}

// Importieren Sie den Bus aus „./Bus.js“ in die Komponente, die externe Ereignisse empfangen muss
Standard exportieren{
    montiert(){
        // Auf Ereignisauslöser warten Bus.$on("sendMsg", data => {
            console.log("Dies sind die empfangenen Daten:", Daten)
        })
    },
    vorZerstören(){
        //Überwachung abbrechen Bus.$off("sendMsg")
    }
}

Vue von „vue“ importieren
Vuex von „vuex“ importieren
Getter aus „./getters“ importieren
Aktionen aus „./actions“ importieren
Mutationen aus „./mutations“ importieren
Status aus „./state“ importieren
Benutzer aus „./modules/user“ importieren

Vue.Verwenden(Vuex)

const store = neuer Vuex.Store({
  Module:
    Benutzer
  },
  Getter,
  Aktionen,
  Mutationen,
  Zustand
})
Standardspeicher exportieren

Vue von „vue“ importieren
Store aus "./store" importieren
neuer Vue({
    el:"#app",
    speichern,
    rendern: h => h(App)
})

importiere { mapGetters, mapMutations } von "vuex"
Standard exportieren{
    berechnet:{
        // Methode 1. Verwenden Sie dann Folgendes. Eigenschaftsname ... mapGetters (["Eigenschaft 1 von getters.js einführen", "Eigenschaft 2"])
        // Methode 2 ... mapGetters("Benutzer", ["Attribut 1 im Benutzermodul", "Attribut 2"])
    },
    Methoden:{
        // Methode 1. Verwenden Sie dann Folgendes. Eigenschaftsname ... mapMutations (["Methode 1 aus mutations.js","Methode 2"])
        // Methode 2...mapMutations("user",["Methode 1 aus dem Benutzermodul","Methode 2"])
    }
}

// Oder Sie können this.$store.state.xxx auch so abrufen
dies.$store.state.user.xxx

// Kind.vue
<Vorlage>
    <div>
        <slot :user="Benutzer"></slot>
    </div>
</Vorlage>
Standard exportieren{
    Daten(){
        zurückkehren {
            Benutzer: { Name: "Muhua" }
        }
    }
}

// Übergeordnetes Element.vue
<Vorlage>
    <div>
        <child v-slot="slotProps">
            {{ slotProps.Benutzername }}
        </child>
    </div>
</Vorlage>