So verwenden Sie syntaktischen Zucker in Vue3

Komponenten migrieren

Die folgende Komponente verfügt über zwei Requisiten (zur Anzeige und eine Flagge). Berechnen Sie mithilfe einer anderen Komponente die URL des in der Vorlage angezeigten Ponybilds basierend auf diesen beiden Requisiten. Die Komponente gibt außerdem ein Ereignis aus, wenn der Benutzer darauf klickt. Das ausgewählte Bild, während das Ponypony-Modell ausgeführt wird.

Pony.vue

<template>
  <figure @click="clicked()">
    <Image :src="ponyImageUrl" :alt="ponyModel.name" />
    <figcaption>{{ ponyModel.name }}</figcaption>
  </figure>
</template>
<script lang="ts">
import { computed, defineComponent, PropType } from &#39;vue&#39;;
import Image from &#39;./Image.vue&#39;;
import { PonyModel } from &#39;@/models/PonyModel&#39;;
 
export default defineComponent({
  components: { Image },
 
  props: {
    ponyModel: {
      type: Object as PropType<PonyModel>,
      required: true
    },
    isRunning: {
      type: Boolean,
      default: false
    }
  },
 
  emits: {
    selected: () => true
  },
 
  setup(props, { emit }) {
    const ponyImageUrl = computed(() => `/pony-${props.ponyModel.color}${props.isRunning ? &#39;-running&#39; : &#39;&#39;}.gif`);
 
    function clicked() {
      emit(&#39;selected&#39;);
    }
 
    return { ponyImageUrl, clicked };
  }
});
</script>

Der erste Schritt besteht darin, dem Element Attribute hinzuzufügen. Dann müssen wir nur noch den Inhalt der Funktion behalten: Das gesamte Boilerplate kann verschwinden. Sie können Funktionen in und entfernen: setupscriptsetupdefineComponentsetupscript

Pony.vue

<script setup lang="ts">
import { computed, PropType } from &#39;vue&#39;;
import Image from &#39;./Image.vue&#39;;
import { PonyModel } from &#39;@/models/PonyModel&#39;;
 
components: { Image },
 
props: {
  ponyModel: {
    type: Object as PropType<PonyModel>,
    required: true
  },
  isRunning: {
    type: Boolean,
    default: false
  }
},
 
emits: {
  selected: () => true
},
 
const ponyImageUrl = computed(() => `/pony-${props.ponyModel.color}${props.isRunning ? &#39;-running&#39; : &#39;&#39;}.gif`);
 
function clicked() {
  emit(&#39;selected&#39;);
}
 
return { ponyImageUrl, clicked };
</script>

Implizite Rückgaben

Durch das Entfernen der Bindungsdeklarationen und Importanweisungen der obersten Ebene am Ende werden diese automatisch für die Verwendung in der Vorlage verfügbar. Sie sind also hier und verfügbar und müssen nicht zurückgegeben werden. Wenn auf das Pony-Bild geklickt wird, kehrt das Skript zurück.

Dieser Satz kann wie folgt umgeschrieben werden: „Wir können die Komponente einfach importieren und Vue erkennt automatisch ihre Verwendung in der Vorlage, sodass die Deklaration weggelassen werden kann.“ ComponentsImagecomponents

Pony.vue

<script setup lang="ts">
import { computed, PropType } from &#39;vue&#39;;
import Image from &#39;./Image.vue&#39;;
import { PonyModel } from &#39;@/models/PonyModel&#39;;
 
props: {
  ponyModel: {
    type: Object as PropType<PonyModel>,
    required: true
  },
  isRunning: {
    type: Boolean,
    default: false
  }
},
 
emits: {
  selected: () => true
},
 
const ponyImageUrl = computed(() => `/pony-${props.ponyModel.color}${props.isRunning ? &#39;-running&#39; : &#39;&#39;}.gif`);
 
function clicked() {
  emit(&#39;selected&#39;);
}
</script>

Wir haben es fast geschafft: Jetzt müssen wir migrieren und deklarieren. propsmits

defineProps

Vue bietet einen Helfer, mit dem Sie Ihre Requisiten definieren können. Dies ist ein Hilfsprogramm zur Kompilierungszeit (ein Makro), sodass Sie es nicht in Ihren Code importieren müssen. Vue erkennt Ihre Komponente beim Kompilieren automatisch. defineProps

defineProps gibt Requisiten zurück:

const props = defineProps({
  ponyModel: {
    type: Object as PropType<PonyModel>,
    required: true
  },
  isRunning: {
    type: Boolean,
    default: false
  }
});

defineProps erhält die vorherige Deklaration als Parameter. Aber wir können es für TypeScript-Benutzer noch besser machen! props

defineProps ist im Allgemeinen typisiert: Sie können es ohne Parameter aufrufen, aber eine Schnittstelle als „Form“ der Requisite angeben. Es gibt nichts Schrecklicheres zu schreiben! Wir können den richtigen TypeScript-Typ verwenden und ???? hinzufügen, um die Requisite als unnötig zu markieren. In flüssigerer Sprache umgeschrieben: „Wenn Objekt als Typ von Requisiten verwendet wird, muss ich dann einen bestimmten Typ angeben?“

const props = defineProps<{
  ponyModel: PonyModel;
  isRunning?: boolean;
}>();

Aber wir haben einige Informationen verloren. In früheren Versionen konnten wir den Standardwert als angeben. Um das gleiche Verhalten zu erzielen, konnten wir den Helfer verwenden: isRunningfalsewithDefaults

interface Props {
  ponyModel: PonyModel;
  isRunning?: boolean;
}
 
const props = withDefaults(defineProps<Props>(), { isRunning: false });

Die letzte zu migrierende Syntax sind Deklarationen. emits

defineEmits

Vue stellt einen Helfer bereit, der einem Helfer sehr ähnlich ist. Dieser Satz drückt bereits klar eine Funktion und die entsprechenden Operationen aus, sodass es schwierig ist, ihn in einem einzigen Satz umzuschreiben. Wenn Sie jedoch neu schreiben müssen, können Sie die folgenden Methoden ausprobieren: 1. Mit diesen Funktionen werden Ereignisse definiert und ausgelöst. 2. Die Funktionen „defineEmits“, „defineProps“ und „defineEmitsemit“ beziehen sich alle auf Ereignisse. 3. Wenn Sie Ereignisse definieren, festlegen und auslösen müssen, können Sie die Funktionen defineEmits, defineProps und defineEmitsemit verwenden. 4. Diese Funktionen können Ihnen bei der Verwaltung von Ereignissen in Vue.js helfen.

const emit = defineEmits({
  selected: () => true
});

Oder noch besser: Verwenden Sie TypeScript:

const emit = defineEmits<{
  (e: &#39;selected&#39;): void;
}>();

Die vollständige Komponentendeklaration ist 10 Zeilen kürzer. Nicht schlecht, um 30 Komponentenreihen zu reduzieren! Dies trägt zur Verbesserung der Lesbarkeit bei und funktioniert besser mit TypeScript. Obwohl es etwas seltsam erscheint, alles automatisch in der Vorlage anzuzeigen, da es keine Zeilenumbrüche gibt, werden Sie sich daran gewöhnen.

Pony.vue

Default off und defineExpose

Es gibt einige subtile Unterschiede, die die beiden Arten der Deklaration einer Komponente unterscheiden: Eine Komponente ist „standardmäßig nicht aktiviert“. Dies bedeutet, dass andere Komponenten nicht sehen können, was in der Komponente definiert ist. Skript-Setup

Als Beispiel werden wir im nächsten Kapitel sehen, dass eine Komponente auf eine andere Komponente zugreifen kann (durch Verwendung von Refs). Wenn eine Funktion als XX definiert ist, ist der gesamte von der Funktion zurückgegebene Inhalt auch in der übergeordneten Komponente YY sichtbar. Wenn mit definiert, ist die übergeordnete Komponente nicht sichtbar. Offengelegter Inhalt kann durch Hinzufügen von Helfern ausgewählt werden. Die öffentlichen werden dann als zugänglich sein. PonyImageImagedefineComponentsetupPonyImagescript setupImagedefineExpose({ key: value })valuekey

Das obige ist der detaillierte Inhalt vonSo verwenden Sie syntaktischen Zucker in Vue3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!