Detaillierte Erklärung der benutzerdefinierten Ereignisse von Vue-Komponenten

<Vorlage>
  <div >
    <h2>{{msg}}</h2>
    <!-- Implementiert durch Übergeben von Dateneigenschaften des Funktionstyps von der übergeordneten Komponente an die untergeordnete Komponente: Untergeordnete Komponente übergibt Daten an übergeordnete Komponente -->
<Schule :getName="getName"/>
<Student :getStudentname="getStudentname"/>
<!-- Binden Sie ein benutzerdefiniertes Ereignis über die übergeordnete Komponente an die untergeordnete Komponente: Realisieren Sie die Datenübertragung von der untergeordneten zur übergeordneten Komponente-->
<Alter v-on:elderSex="demo"/>
<!-- Binden Sie ein benutzerdefiniertes Ereignis über die übergeordnete Komponente an die untergeordnete Komponente: Die untergeordnete Komponente übergibt Daten an die übergeordnete Komponente (zweite Schreibweise: using ref) -->
   <!-- <Student ref="student"/> -->
  </div>
</Vorlage>
<Skript>
Importiere Schule aus „./components/School.vue“
Importiere Student aus './components/Student.vue'
Importiere Age aus „./components/Age.vue“
Standard exportieren {
Name: „App“,
Komponenten: {Schule, Schüler, Alter},
Daten(){
  zurückkehren {
    msg:'Hallo Welt! '
  }
},
Methoden:{ 
  getName(Name){
    console.log('App hat den Namen erhalten',Name);
  },
  getStudentname(name1){
    console.log('Name des Studenten erhalten',name1);
  },
  demo(Sex1){
    console.log('Demo wird aufgerufen',sex1);
  }
},
// gemountet() {
  //Benutzerdefinierte Ereignisse binden // this.$refs.student.$on('elderSex',this.schoolAge)
//Benutzerdefiniertes Ereignis binden (einmalig)
// dies.$refs.student.$once('ältestesGeschlecht',dieses.Schulalter)
// },
}
</Skript>
<Stilbereich>
</Stil>

<Vorlage>
  <div Klasse="Demo">
    <h2>Name des Studenten: {{name}}</h2>
    <h2>Alter des Schülers: {{age}}</h2>
    <button @click="sendStudentname">Senden Sie den Namen des Studenten an die APP</button>
  </div>
</Vorlage>
<Skript>
  Standard exportieren {
    Name: 'Student',
    Requisiten: ['getStudentname'],
    Daten() {
      zurückkehren {
        Name: 'Zhang San',
        Alter: 19
      }
    },
    Methoden: {
      sendStudentname() {
        dies.getStudentname(diesen.namen)
      }
    }
  }
</Skript>
<Stil>
  .demo {
    Hintergrundfarbe: himmelblau;
  }
</Stil>