Einführung in die Verwendung von Requisiten in Vue

<Vorlage>

  <div>

    <h3>Ich bin {{name}}, ich bin {{age}} Jahre alt, mein Hobby ist {{hobby}}</h3>, {{flag}}

  </div>

</Vorlage>



<Skript>

Standard exportieren {

    Name: „Cpn“,

    // Einfacher Empfang /* props:['Alter','Hobby','Name'], */

    // Deklarieren Sie die zu empfangenden Daten und beschränken Sie die empfangenen Daten beim Deklarieren von Props:{

        Name: {

            //Typ deklarieren:String,

            //Deklarieren Sie, ob es erforderlich ist: true,

            // Deklariere den Standardwert default:'Standardwert'

        },

        Alter:{

            Typ: Nummer,

            erfordern:wahr,

            Standard: 18

        },

        Hobby:

            Typ: Zeichenfolge,

            erfordern:false

        },

        Flagge:{

            Typ: Boolean,

            erfordern:false

        }

    }

}

</Skript>

<Vorlage>

  <div id="app">

    <!-- <cpn name='李明' age="22" hobby="Ball spielen"></cpn>

    <cpn name="Xiaohong" age="20" hobby="Klavier spielen"></cpn> -->

    <cpn name='Kontakt'></cpn>

    <cpn hobby="Programmierung" :flag="flag"></cpn>

      <!--Hinweis: Wenn Sie die Daten in den aktuellen Komponentendaten an die untergeordnete Komponente übergeben möchten, müssen Sie sie in der Form v-bing übergeben: Variablenname = "Variablenname". Wenn die übergebenen Daten nicht in Daten enthalten sind, muss die Bindungsanweisung nicht hinzugefügt werden, d. h. v-bind (kann wie folgt abgekürzt werden:) -->

    <button @click="changeFlag">Wechseln</button>

  </div>

</Vorlage>

<Skript>

importiere Cpn aus './components/Cpn.vue'

Standard exportieren {

  Komponenten: { Cpn },

  Name: "App",

  Daten() {

    zurückkehren {

      Flagge: falsch

    }

  },

  Methoden: {

    Flagge ändern(){

      Konsole.log(dieses.Flag)

      diese.flagge=!diese.flagge;

      Konsole.log(dieses.Flag)

    }

  },

}

</Skript>