Detaillierte Erklärung der Props-Konfiguration von Vue

<Vorlage>
  <div Klasse="Demo">
    <h1>{{ msg}}</h1>
    <h2>Name des Studenten: {{name}}</h2>
    <h2>Geschlecht des Studierenden: {{sex}}</h2>
    <h2>Alter des Schülers: {{myage+1}}</h2>
    <button @click="changeAge">Klicken Sie hier, um die Daten zu ändern</button>
  </div>
</Vorlage>

<Skript>
  Standard exportieren {
    Name: 'Student',
    Daten() {
      zurückkehren {
        Nachricht: 'Liebhaber des Königs',
        meinAlter:dieses.Alter
      }
    },
    Methoden: {
      Alter ändern(){
       dies.meinAlter=24
      }
    },
    //Einfacher Empfang// Requisiten: ['Name', 'Alter', 'Geschlecht']


    //Beschränken Sie den Datentyp beim Empfangen von // props:{
    // Name:Zeichenfolge,
    //Alter:Anzahl,
    // Geschlecht:Zeichenfolge,
    // }

//Beim Empfangen von Daten: Beschränken Sie den Typ + geben Sie den Standardwert an + beschränken Sie die Notwendigkeit props: {
      Name: {
        Typ: String, //Namenstyp erforderlich: true, //Name ist erforderlich},
      Alter: {
        Typ: Nummer, 
       Standard: 22
      },
      Sex:
        Typ: Zeichenfolge, 
        erforderlich: true
      }
 }

  }
</Skript>

<Vorlage>
  <div>
    <Student name="Student" sex="Student" :myage="20"/>
  </div>
</Vorlage>

<Skript>
  //Student-Komponente importierenimport Student aus './components/Student.vue'
  Standard exportieren {
    Name: "App",
    Komponenten:
     Student
    }
  }

</Skript>