Detaillierte Erklärung inkompatibler Änderungen von Komponenten in vue3

// Verwenden Sie die Komponente <dynamic-heading>, die für die Bereitstellung der entsprechenden Überschrift (also h1, h2, h3 usw.) verantwortlich ist. In 2.x würde dies wahrscheinlich als einzelne Dateikomponente geschrieben werden:
// Vue 2 Funktionskomponente Beispiel export default {
 funktional: wahr,
 Requisiten: ['Level'],
 render(h, { Eigenschaften, Daten, untergeordnete Elemente }) {
 returniere h(`h${props.level}`, Daten, untergeordnete Elemente)
 }
}

// Vue 2 Funktionskomponentenbeispiel mit <template>
<funktionale Vorlage>
 <Komponente
 :ist="`h${props.level}`"
 v-bind="attrs"
 v-on="Zuhörer"
 />
</Vorlage>

<Skript>
Standard exportieren {
 Requisiten: ['Level']
}
</Skript>

//vue3.0
importiere { h } von 'vue'
const DynamicHeading = (Eigenschaften, Kontext) => {
 returniere h(`h${props.level}`, Kontext.attrs, Kontext.slots)
}
DynamicHeading.props = ['Ebene']
Standardmäßige dynamische Überschrift exportieren
// Vue3.0 einzelne Datei schreiben <template>
 <Komponente
 v-bind:is="`h${$props.level}`"
 v-bind="$attrs"
 />
</Vorlage>

<Skript>
Standard exportieren {
 Requisiten: ['Level']
}
</Skript>

Das funktionale Attribut zum Entfernen von Listenern in <template> wird nun als Teil von $attrs übergeben und kann entfernt werden

// vue2.x
// Bisher wurden asynchrone Komponenten erstellt, indem die Komponente als Funktion definiert wurde, die ein Promise zurückgibt const asyncPage = () => import('./NextPage.vue')
// Oder als Option erstellen const asyncPage = {
 Komponente: () => import('./NextPage.vue'),
 Verzögerung: 200,
 Zeitüberschreitung: 3000,
 Fehler: ErrorComponent,
 wird geladen: Komponente wird geladen
}

// vue3.x
In vue3.x müssen Sie defineAsyncComponent verwenden, um import{ defineAsyncComponent } von „vue“ zu definieren.
Importiere ErrorComponent aus „./components/ErrorComponent.vue“
importiere LoadingComponent aus './components/LoadingComponent.vue'

// Definitionsmethode ohne Optionen const asyncPage = defineAsyncComponent(() => import('./NextPage.vue'))

// Asynchrone Komponente mit Optionen constasyncPageWithOptions = defineAsyncCopmonent({
 Lader: () => import('./NextPage.vue'),
 Verzögerung: 200,
 Zeitüberschreitung: 3000,
 Fehlerkomponente: Fehlerkomponente,
 Komponente wird geladen: Komponente wird geladen
})

// vue2.x
const oldAsyncComponent = (auflösen, ablehnen) => {}
// vue3.x
const asyncComponent = defineAsyncComponent(() => neues Promise((auflösen, ablehnen) => {}))

<!-- vue2.x -->
<Vorlage>
 <div>
 <p>{{ text }}</p>
 <button v-on:click="$emit('accepted')">OK</button>
 </div>
</Vorlage>
<Skript>
 Standard exportieren {
 Requisiten: ['Text']
 }
</Skript>

<!-- vue3.x -->
<!-- Ähnlich wie bei Props können Ems nun verwendet werden, um von Komponenten emittierte Ereignisse zu definieren-->
<!-- Diese Option empfängt auch ein bestimmtes Objekt, das zur Validierung der übergebenen Parameter wie Requisiten verwendet wird-->
<!-- Es wird dringend empfohlen, alle Emission von jeder Komponente aufzuzeichnen, da ohne den Modifikator .native alle Listener für Ereignisse, die nicht mit deklariert wurden, in das $attr der Komponente aufgenommen werden, das standardmäßig an den Stammknoten der Komponente gebunden ist -->
<Vorlage>
 <div>
 <p>{{ text }}</p>
 <button v-on:click="$emit('accepted')">OK</button>
 </div>
</Vorlage>
<Skript>
 Standard exportieren {
 Requisiten: ['Text'],
 emittiert: ['akzeptiert']
 }
</Skript>