So verwenden Sie <script lang='ts' setup> syntaktischen Zucker in Vue3-View.js-php.cn

Inhaltsverzeichnis

Komponenten migrieren

Implizite Rückgaben

defineProps

defineEmits

Default off und defineExpose

Heim

Web-Frontend

View.js

So verwenden Sie

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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
  }
});

Nach dem Login kopieren

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;
}>();

Nach dem Login kopieren

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 });

Nach dem Login kopieren

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
});

Nach dem Login kopieren

Oder noch besser: Verwenden Sie TypeScript:

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Repo: Wie man Teamkollegen wiederbelebt

4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt

4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Wie lange dauert es, um Split Fiction zu schlagen?

3 Wochen vor By DDD

R.E.P.O. Dateispeicherspeicherort: Wo ist es und wie schützt sie?

3 Wochen vor By DDD

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7333

Java-Tutorial

1627

CakePHP-Tutorial

1351

Laravel-Tutorial

1262

PHP-Tutorial

1209

Related knowledge

vue3+vite: So beheben Sie den Fehler bei der Verwendung von require zum dynamischen Importieren von Bildern in src May 21, 2023 pm 03:16 PM

vue3+vite:src verwendet „require“, um Bilder dynamisch zu importieren, und vue3+vite importiert dynamisch mehrere Bilder. Wenn Sie „requireisnotdefined“ verwenden, wird eine Fehlermeldung angezeigt like vue2 like imgUrl:require(' .../assets/test.png') wird importiert, da Typescript Require nicht unterstützt, daher wird Import verwendet. So lösen Sie das Problem: Verwenden Sieawaitimport

So verwenden Sie tinymce im Vue3-Projekt May 19, 2023 pm 08:40 PM

tinymce ist ein voll funktionsfähiges Rich-Text-Editor-Plug-in, aber die Einführung von tinymce in Vue ist nicht so reibungslos wie bei anderen Vue-Rich-Text-Plug-ins. Tinymce selbst ist nicht für Vue geeignet, und @tinymce/tinymce-vue muss eingeführt werden. und Es handelt sich um ein ausländisches Rich-Text-Plug-in, das die chinesische Version nicht bestanden hat. Sie müssen das Übersetzungspaket von der offiziellen Website herunterladen (möglicherweise müssen Sie die Firewall umgehen). 1. Installieren Sie die zugehörigen Abhängigkeiten npminstalltinymce-Snpminstall@tinymce/tinymce-vue-S2. 3. Führen Sie den Skin und das chinesische Paket ein. Erstellen Sie einen neuen Tinymce-Ordner im öffentlichen Ordner des Projekts und laden Sie ihn herunter

Wie Vue3 Markdown analysiert und Code-Hervorhebung implementiert May 20, 2023 pm 04:16 PM

Um das Blog-Frontend mit Vue zu implementieren, müssen Sie die Markdown-Analyse implementieren. Wenn Code vorhanden ist, müssen Sie die Code-Hervorhebung implementieren. Es gibt viele Markdown-Parsing-Bibliotheken für Vue, wie z. B. markdown-it, vue-markdown-loader, markiert, vue-markdown usw. Diese Bibliotheken sind alle sehr ähnlich. Hier wird Markiert verwendet, und highlights.js wird als Code-Hervorhebungsbibliothek verwendet. Die spezifischen Implementierungsschritte lauten wie folgt: 1. Installieren Sie abhängige Bibliotheken. Öffnen Sie das Befehlsfenster unter dem Vue-Projekt und geben Sie den folgenden Befehl ein: npminstallmarked-save//marked, um Markdown in htmlnpmins zu konvertieren

So aktualisieren Sie einen Teilinhalt der Seite in Vue3 May 26, 2023 pm 05:31 PM

Um eine teilweise Aktualisierung der Seite zu erreichen, müssen wir nur das erneute Rendern der lokalen Komponente (dom) implementieren. In Vue lässt sich dieser Effekt am einfachsten mit der v-if-Direktive erzielen. In Vue2 können wir zusätzlich zur Verwendung der v-if-Anweisung zum erneuten Rendern des lokalen Doms auch eine neue leere Komponente erstellen. Wenn wir die lokale Seite aktualisieren müssen, springen wir zu dieser leeren Komponentenseite und springen dann wieder hinein der beforeRouteEnter-Schutz in der leeren Komponente. Wie in der Abbildung unten gezeigt, wie man in Vue3.X auf die Schaltfläche „Aktualisieren“ klickt, um das DOM im roten Feld neu zu laden und den entsprechenden Ladestatus anzuzeigen. Da der Guard in der Komponente in der scriptsetup-Syntax in Vue3.X nur o hat

So lösen Sie das Problem, dass die Zugriffsseite leer angezeigt wird, nachdem das vue3-Projekt gepackt und auf dem Server veröffentlicht wurde May 17, 2023 am 08:19 AM

Nachdem das vue3-Projekt gepackt und auf dem Server veröffentlicht wurde, wird auf der Zugriffsseite eine leere 1 angezeigt. Der publicPath in der Datei vue.config.js wird wie folgt verarbeitet: const{defineConfig}=require('@vue/cli-service') module.exports=defineConfig({publicPath :process.env.NODE_ENV==='produktion'?'./':'/&

So verwenden Sie wiederverwendbare Vue3-Komponenten May 20, 2023 pm 07:25 PM

Vorwort Ob Vue oder React: Wenn wir auf mehrere wiederholte Codes stoßen, werden wir darüber nachdenken, wie wir diese Codes wiederverwenden können, anstatt eine Datei mit einer Reihe redundanter Codes zu füllen. Tatsächlich können sowohl Vue als auch React eine Wiederverwendung durch Extrahieren von Komponenten erreichen. Wenn Sie jedoch auf einige kleine Codefragmente stoßen und keine andere Datei extrahieren möchten, kann React im Vergleich dazu verwendet werden Deklarieren Sie das entsprechende Widget in der Datei , oder implementieren Sie es über die Renderfunktion, wie zum Beispiel: constDemo:FC=({msg})=>{returndemomsgis{msg}}constApp:FC=()=>{return(

So verwenden Sie defineCustomElement zum Definieren von Komponenten in Vue3 May 28, 2023 am 11:29 AM

Verwenden von Vue zum Erstellen benutzerdefinierter Elemente. WebComponents ist ein Sammelname für eine Reihe webnativer APIs, die es Entwicklern ermöglichen, wiederverwendbare benutzerdefinierte Elemente (Customelements) zu erstellen. Der Hauptvorteil von benutzerdefinierten Elementen besteht darin, dass sie mit jedem Framework verwendet werden können, auch ohne Framework. Sie sind ideal, wenn Sie Endbenutzer ansprechen, die möglicherweise einen anderen Front-End-Technologie-Stack verwenden, oder wenn Sie die endgültige Anwendung von den Implementierungsdetails der verwendeten Komponenten entkoppeln möchten. Vue und WebComponents sind komplementäre Technologien und Vue bietet hervorragende Unterstützung für die Verwendung und Erstellung benutzerdefinierter Elemente. Sie können benutzerdefinierte Elemente in bestehende Vue-Anwendungen integrieren oder Vue zum Erstellen verwenden

So implementieren Sie den automatischen Import mit Vue3 und Element Plus May 22, 2023 pm 04:58 PM

1 Einführung 1.1 Zweck ElementPlus verwendet die On-Demand-Einführung, um die Größe der gepackten Datei erheblich zu reduzieren. 1.2 Der Endeffekt besteht darin, die Datei „components.d.ts“ automatisch zu generieren und in die Datei einzufügen. d.ts-Datei und fügen Sie sie in die Datei ein. ElementPlusAPI2 Vorbereitung Installieren Sie ElementPlus#Wählen Sie einen Paketmanager, der Ihnen gefällt#NPM$npminstallelement-plus--save#Yarn$yarnaddelement-plus#pnpm$pnpminstallelement-plus3 Drücken Sie

See all articles