Sehr empfehlenswert! Syntax Sugar in Vue 3.2 einrichten

Vorherige

Als Front-End-Programmierer sind Sie sicherlich mit Vue 3 vertraut. Da es heutzutage eines der beliebtesten Front-End-Frameworks ist, wird es von vielen als Framework für Einsteiger verwendet.

Obwohl Vue 3 bereits seit langer Zeit im Einsatz ist, beschweren sich manche Leute unweigerlich darüber, dass Vue 3 zu viele und zu komplizierte Wissenspunkte aufweist und zu schnell aktualisiert wird. Kürzlich wurde in Vue 3 eine neue Technologie fertiggestellt: Syntax Sugar für die Skripteinrichtung.

1. Was ist Setup-Syntax-Sugar?

Ursprünglich mussten die in Vue 3.0 bereitgestellten Variablen zurückgegeben werden, bevor sie in der Vorlage verwendet werden konnten.

Jetzt müssen wir nur noch das Setup im Skript-Tag hinzufügen. Komponenten müssen nur ohne Registrierung importiert werden, Eigenschaften und Methoden müssen nicht zurückgegeben werden, es ist nicht erforderlich, eine Setup-Funktion zu schreiben, und es ist nicht erforderlich, einen Exportstandard zu schreiben. Sogar benutzerdefinierte Anweisungen können automatisch in unserer Vorlage abgerufen werden.

<Vorlage>
  <meine-Komponente :num="num" @click="addNum" />
</Vorlage>

<Skript-Setup>
  importiere { ref } von 'vue';
  importiere MyComponent aus „./MyComponent .vue“;

  // Schreiben Sie wie im normalen Setup, aber Sie müssen keine Variablen zurückgeben const num = ref(0) // das hier definierte num kann direkt verwendet werden const addNum = () => { // Auf Funktionen kann auch direkt verwiesen werden, ohne num.value++ zurückzugeben
  }
</Skript>

// Muss camelCase verwenden

2. Verwenden Sie die Setup-Komponente zur automatischen Registrierung

Im Skript-Setup können die eingeführten Komponenten direkt verwendet werden, ohne sie über Komponenten zu registrieren, und der Name der aktuellen Komponente kann nicht angegeben werden. Er basiert automatisch auf dem Dateinamen, was bedeutet, dass das Namensattribut nicht geschrieben werden muss. Beispiel:

<Vorlage>
    <zi-hallo></zi-hallo>
</Vorlage>

<Skript-Setup>
  importiere ziHello von './ziHello'
</Skript>

3. Fügen Sie nach dem Setup eine neue API hinzu

Da es keine Setup-Funktion gibt, wie erhalten wir Props und emittieren?

Die Syntax des Setup-Skripts Sugar stellt uns eine neue API zur Verfügung

3.1 Eigenschaften definieren

Wird verwendet, um Requisiten von der übergeordneten Komponente zu empfangen. Beispiel:

Code der übergeordneten Komponente

<Vorlage>
  <div class="die">
    <h3>Ich bin die übergeordnete Komponente</h3>
    <zi-hello :name="name"></zi-hello>
  </div>
</Vorlage>

<Skript-Setup>
  importiere ziHello von './ziHello'
  
  importiere {ref} von 'vue'
  let name = ref('Name des Objekts ========')
</Skript>

Unterkomponentencode

<Vorlage>
  <div>
    Ich bin eine Unterkomponente {{name}} // Zhao Xiaolei========
  </div>
</Vorlage>

<Skript-Setup>
  importiere { defineProps } von 'vue'

  defineProps({
   Name:{
     Typ: Zeichenfolge,
     Standard: „Ich bin der Standardwert“
   }
 })
</Skript>

3.2 Emits definieren

Untergeordnete Komponenten geben Ereignisse an übergeordnete Komponenten weiter. Beispiel:

Unterkomponenten

<Vorlage>
  <div>
    Ich bin die untergeordnete Komponente {{name}}
    <button @click="ziupdata">Schaltfläche</button>
  </div>
</Vorlage>

<Skript-Setup>
  importiere { defineEmits } von 'vue'

  //Benutzerdefinierte Funktion, übergeordnete Komponente kann const em=defineEmits(['updata']) auslösen.
  const ziupdata=()=>{
    em("updata",'Ich bin der Wert der untergeordneten Komponente')
  }

</Skript>

Übergeordnete Komponente

<Vorlage>
  <div class="die">
    <h3>Ich bin die übergeordnete Komponente</h3>
    <zi-hello @updata="updata"></zi-hello>
  </div>
</Vorlage>

<Skript-Setup>
  importiere ziHello von './ziHello'
  
  const updateata = (Daten) => {
    console.log(data); //Ich bin der Wert der untergeordneten Komponente}
</Skript>

3.3 definierenExpose

Die Komponente stellt ihre eigenen Eigenschaften bereit, die in der übergeordneten Komponente abgerufen werden können. Beispiel:

Unterkomponenten

<Vorlage>
  <div>
    Ich bin eine untergeordnete Komponente</div>
</Vorlage>

<Skript-Setup>
  importiere { defineExpose, reactive, ref } von 'vue'
  sei ziage = ref(18)
  lass ziname = reaktiv({
    Name: „Zhao Xiaolei“
  })
  //Exposure-Variablen defineExpose({
    Ziage,
    ziname
  })
</Skript>

Übergeordnete Komponente

<Vorlage>
  <div class="die">
    <h3 @click="isclick">Ich bin die übergeordnete Komponente</h3>
    <zi-hello ref="zihello"></zi-hello>
  </div>
</Vorlage>

<Skript-Setup>
  importiere ziHello von './ziHello'
  importiere {ref} von 'vue'
  const zihello = ref()

  const isclick = () => {
    console.log('Den von ref angezeigten Wert erhalten',zihello.value.ziage)
    console.log('Den von reactive angezeigten Wert erhalten',zihello.value.ziname.name)
  }
</Skript>

Das von der übergeordneten Komponente erhaltene Ergebnis

So aktivieren Sie die Setup-Syntax Sugar im Vue3-Projekt

https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar

1. Schließen Sie zunächst das Vetur-Plugin des Editors und öffnen Sie Volar

2. Erstellen Sie eine neue Datei tsconfig.json / jsconfig.json und fügen Sie in den CompilerOptions die Konfigurationselemente „strict“: true und „moduleResolution“: „node“ hinzu.

Zusammenfassen:

Das Obige ist das Verständnis und Wissen über Setup-Syntax-Sugar. Dieser Artikel über Setup-Syntax-Sugar in Vue3.2 wird hier vorgestellt. Weitere relevante Inhalte über Setup-Syntax-Sugar in Vue3.2 finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!