Zusammenfassung der zwölf Methoden der Vue-Wertübertragung

//Übergeordnete Komponente <template>
  <div>
    <i>Übergeordnete Komponente</i>
    <!--Seitennutzung-->
    <son :data='Name'></son> 
  </div>
</Vorlage>

<Skript>
importiere Sohn von "./son.vue"; //Übergeordnete Komponente importieren export default {
  Komponenten: { Sohn }, //Komponentenname registrieren: "übergeordnete Komponente",
  Daten() {
    zurückkehren {
      Name: "Frazier", //übergeordnete Komponente definiert Variablen};
  },
};
</Skript>

//Unterkomponente <Vorlage>
  <div>{{Daten}}</div>
</Vorlage>

<Skript>
Standard exportieren {
Komponenten: { },
  Name: 'Unterkomponente',
  Requisiten: ["Daten"],
};
</Skript>

//Übergeordnete Komponente <template>
  <div>
    <i>Übergeordnete Komponente</i>
    <!--Seitennutzung-->
    <son @lcclick="lcclick"></son>//Ein Ereignis anpassen</div>
</Vorlage>

<Skript>
importiere Sohn von "./son.vue"; //Übergeordnete Komponente importieren export default {
  Komponenten: { Sohn }, //Komponentenname registrieren: "übergeordnete Komponente",
  Daten() {
    zurückkehren {};
  },
  Methoden: {
    lcklick(){
      Alarm (,Sohn geht an Vater über‘)
    }
  },
};
</Skript>

//Unterkomponente <Vorlage>
  <div>
    <button @click="lcalter">Klick mich</button>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
Komponenten: { },
  Name: 'Unterkomponente',
  Methoden: {
    lcalter(){
      this.$emit('lcclick')//Löse das Ereignis durch emittieren aus}
  },
};
</Skript>

//Übergeordnete Komponente <template>
  <div>
    <button @click="sayHello">sagHallo</button>
    <child ref="childForRef"></child>
  </div>
</Vorlage>
<Skript>
Kind aus „./child.vue“ importieren
  Standard exportieren {
    Komponenten: { Kind },
    Daten () {
      zurückkehren {
        childForRef: null,
      }
    },
    montiert() {
      dies.childForRef = dies.$refs.childForRef;
      Konsole.log(dieses.childForRef.name);
    },
    Methoden: {
      sagHallo() {
        dies.childForRef.sayHello()
      }
    }
  }
</Skript>

//Unterkomponente <Vorlage>
  <div>Kinderinhalte</div>
</Vorlage>
<Skript>
Standard exportieren {
  Daten () {
    zurückkehren {
      Name: 'Ich bin ein Kind',
    }
  },
  Methoden: {
    sagHallo() {
      console.log('hallo');
      Alarm ('Hallo');
    }
  }
}
</Skript>

//Vorlage für übergeordnete Komponente>
  <div id="app">
    <KindA/>
    <KindB/>
  </div>
</Vorlage>
<Skript>
  importiere ChildA von './ChildA' // Komponente A importieren importiere ChildB von './ChildB' // Komponente B importieren export default {
    Komponenten: {ChildA, ChildB} // Komponenten registrieren}
</Skript>

//Unterkomponente A
<Vorlage>
 <div id="KindA">
   <h1>Ich bin Komponente A</h1>
   <button @click="transform">Klicken Sie hier, damit Komponente B Daten empfängt</button>
   <p>Da auf B geklickt wurde, hat sich die Nachricht geändert: {{BMessage}}</p>
 </div>
</Vorlage>
<Skript>
 Standard exportieren {
   Daten() {
     zurückkehren {
       Eine Nachricht: „Hallo Komponente B, ich bin Komponente A“
     }
   },
   berechnet: {
     BMessage() {
       // Speichere hier die aus dem Store erhaltenen Daten von Komponente B. returniere this.$store.state.BMsg
     }
   },
   Methoden: {
     transformieren() {
       // receiveAMsg auslösen und die Daten der Komponente A im Store speichern this.$store.commit('receiveAMsg', {
         AMsg: diese.AMessage
       })
     }
   }
 }
</Skript>

//Unterkomponente B
<Vorlage>
 <div id="KindB">
   <h1>Ich bin Komponente B</h1>
   <button @click="transform">Klicken Sie hier, damit Komponente A Daten empfängt</button>
   <p>Klicken Sie auf A, meine Nachricht ändert sich: {{AMessage}}</p>
 </div>
</Vorlage>

<Skript>
 Standard exportieren {
   Daten() {
     zurückkehren {
       BMessage: „Hallo Komponente A, ich bin Komponente B“
     }
   },
   berechnet: {
     EineNachricht() {
       // Hier speichern wir die aus dem Store erhaltenen Daten der Komponente A. return this.$store.state.AMsg
     }
   },
   Methoden: {
     transformieren() {
       // receiveBMsg auslösen und die Daten der Komponente B im Store speichern this.$store.commit('receiveBMsg', {
         BMsg: diese.BMessage
       })
     }
   }
 }
</Skript>

// vuex
Vue von „vue“ importieren
 Vuex von „vuex“ importieren
 Vue.Verwenden(Vuex)
 konstanter Zustand = {
   AMsg: '',
   BMsg: ''
 }
 
 const Mutationen = {
   receiveAMsg(Zustand, Nutzlast) {
     //Speichere die Daten der Komponente A im Zustand
     Zustand.AMsg = Nutzlast.AMsg
   },
   receiveBMsg(Zustand, Nutzlast) {
     //Speichere die Daten der Komponente B im Zustand
     Zustand.BMsg = Nutzlast.BMsg
   }
 }
 
 exportiere standardmäßig neuen Vuex.Store({
   Zustand,
   Mutationen
 })

// Daten der übergeordneten Komponente abrufen this.$parent.foo

// Daten in die übergeordnete Komponente schreiben this.$parent.foo = 2

// Zugriff auf die berechnete Eigenschaft this.$parent.bar der übergeordneten Komponente

//Rufen Sie die Methode der übergeordneten Komponente this.$parent.baz() auf.

//Im Beispiel der Übergabe einer untergeordneten Komponente an eine übergeordnete Komponente können Sie this.$parent.getNum(100) verwenden, um den Wert an die übergeordnete Komponente zu übergeben.

// Daten im SessionStorage speichern
sessionStorage.setItem('Schlüssel', 'Wert');

// Daten aus SessionStorage abrufen let data = sessionStorage.getItem('key');

// Gespeicherte Daten aus SessionStorage löschen sessionStorage.removeItem('key');

// Alle gespeicherten Daten aus sessionStorage löschen sessionStorage.clear();

//lokaler Speicher
 storage.set(Schlüssel,Wert) 
 storage.get(Schlüssel, def)
//Sitzungsspeicher
 storage.session.set(Schlüssel, Wert)
 storage.session.get(Schlüssel, Wert)

{
    Pfad: '/b/:name',
    Name: 'b',
    Komponente: () => import( '../views/B.vue')
 },

<router-view :type="Typ"></router-view>

// Unterseiten-Eigenschaften: ['Typ']
betrachten:
       Typ(){
           // console.log("Mit dieser Methode können Sie immer die aktuellsten Daten abrufen: type=", this.type)
       },
},

<Vorlage>
    <Abschnitt>
        <parent name="grandParent" sex="男" age="88" hobby="code" @sayKnow="sayKnow"></parent>
    </Abschnitt>
</Vorlage>

<Skript>
    importiere Parent von './Parent'
    Standard exportieren {
        Name: „Großeltern“,
        Komponenten:
          Elternteil
        },
        Daten() {
            zurückkehren {}
        },
        Methoden: {
          sagWissen(Wert){
            console.log(Wert)
          }
        },
        montiert() {
        }
    }
</Skript>

<Vorlage>
  <Abschnitt>
    <p>Die übergeordnete Komponente empfängt</p>
    <p>Name des Großvaters: {{name}}</p>
    <Kinder v-bind="$attrs" v-on="$listeners"></Kinder>
  </Abschnitt>
</Vorlage>

<Skript>
  Kinder aus './Children' importieren

  Standard exportieren {
    Name: "Übergeordnet",
    Komponenten:
      Kinder
    },
    // Die übergeordnete Komponente erhält den Namen, daher wird der Namenswert nicht an die Eigenschaften der untergeordneten Komponente weitergegeben: ['name'],
    Daten() {
      zurückkehren {}
    },
    Methoden: {},
    montiert() {
    }
  }
</Skript>

<Vorlage>
  <Abschnitt>
    <p>Unterkomponente empfangen</p>
    <p>Name des Großvaters: {{name}}</p>
    <p>Geschlecht des Großvaters: {{sex}}</p>
    <p>Alter des Großvaters: {{age}}</p>
    <p>Großvaters Hobby: {{hobby}}</p>

    <button @click="sayKnow">Ich weiß</button>
  </Abschnitt>
</Vorlage>

<Skript>
  Standard exportieren {
    Name: "Kinder",
    Komponenten: {},
    // Da die übergeordnete Komponente das Namensattribut erhalten hat, wird der Name nicht an die untergeordnete Komponente weitergegeben props:['sex','age','hobby','name'],
    Daten() {
      zurückkehren {}
    },
    Methoden: {
      sagWissen(){
        dies.$emit('sayKnow','Ich weiß')
      }
    },
    montiert() {
    }
  }
</Skript>

<Vorlage>
  <div id="app">
    <Kinder-Eins @eventOne="eventOne"></Kinder-Eins>
    {{ msg }}
  </div>
</Vorlage>
<Skript>
importiere ChildrenOne aus '../src/components/children.vue'
Standard exportieren {
  Name: "App",
  Komponenten:
    KinderEins,
  },
  Daten() {
    zurückkehren {
      Nachricht: ''
    }
  },
  Methoden: {
    eventOne(Wert) {
      this.msg = Wert
    }
  }
}
</Skript>

<Vorlage>
  <div>
    <Kinder-Zwei v-on="$listeners"></Kinder-Zwei>
  </div>
</Vorlage>

<Skript>
importiere ChildrenTwo aus './childrenTwo.vue'

Standard exportieren {
  Name: 'childrenOne',
  Komponenten:
    KinderZwei
  }
}
</Skript>

<Vorlage>
  <div>
    <button @click="setMsg">Klicken, um an Großvater weiterzugeben</button>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: 'Kinder',
  Methoden: {
    setMsg() {
      dies.$emit('eventOne', '123')
    }
  }
}
</Skript>

//Ähnlich wie diese Verwendung, aber tatsächlich können die letzten beiden Parameter nicht erhalten werden promise = new Promise((resolve,reject)=>{
    sei a = 1
    sei b = 2
    sei c = 3
    auflösen(a,b,c) 
})
versprechen.dann((a,b,c)=>{
    konsole.log(a,b,c)
})

Versprechen = neues Versprechen((lösen, ablehnen)=>{
    auflösen([1,2,3]) 
})
versprechen.dann((arr)=>{
    konsole.log(arr[0],arr[1],arr[2])
})

Versprechen = neues Versprechen((lösen, ablehnen)=>{
    lösen({a:1,b:2,c:3}) 
})
versprechen.dann(obj=>{
    konsole.log(Objekt.a,Objekt.b,Objekt.c)
})