Detaillierte Einführung in die dynamische Komponentenvorlage von Vue.js (Codebeispiel)

Der Inhalt dieses Artikels ist eine detaillierte Einführung (Codebeispiel) über die dynamische Komponentenvorlage von Vue.j. Ich hoffe, dass er für Sie hilfreich ist.

Komponenten haben nicht immer die gleiche Struktur. Manchmal gibt es viele verschiedene Zustände, die verwaltet werden müssen. Es ist hilfreich, dies asynchron zu tun.

Beispiel:

Komponentenvorlage wird auf einigen Webseiten an mehreren Stellen verwendet, z. B. in Benachrichtigungen, Notizen und Anhängen. Schauen wir uns gemeinsam die Kommentare an und sehen, was ich meine.
Kommentare sind jetzt nicht mehr nur einfache Textfelder. Sie möchten Links posten, Bilder hochladen, Videos integrieren und mehr. Alle diese unterschiedlichen Elemente müssen in dieser Anmerkung vorhanden sein. Wenn Sie versuchen, dies innerhalb einer Komponente zu tun, kann es sehr schnell sehr verwirrend werden.

Wie geht man damit um?

Wie sollen wir mit diesem Problem umgehen? Wahrscheinlich werden die meisten Leute zuerst alle Fälle prüfen und dann bestimmte Komponenten laden. Etwa so:

<template>
    <p>
        // comment text    
        </p>
<p>...</p>
        // open graph image
        <link-open-graph></link-open-graph>
        // regular image
        <link-image></link-image>
        // video embed
        <link-video></link-video>
        ...
    
</template>

Dies kann jedoch sehr verwirrend und eintönig werden, wenn die Liste der unterstützten Vorlagen immer länger wird. Im Fall unseres Tests – denken Sie nur an die Unterstützung für Einbettungen von YouTube, Twitter, Github, Soundcloud, Vimeo, Figma … die Liste ist endlos.

Dynamische Komponentenvorlagen
Eine andere Möglichkeit besteht darin, eine Art Loader zu verwenden, um die benötigten Vorlagen zu laden. Dadurch können Sie eine saubere Komponente wie folgt schreiben:

<template>
    <p>
        // comment text    
        </p>
<p>...</p>
    
        // type can be 'open-graph', 'image', 'video'...
        <dynamic-link></dynamic-link>
    
</template>

Sieht viel besser aus, nicht wahr? Mal sehen, wie diese Komponente funktioniert. Zuerst müssen wir die Ordnerstruktur der Vorlage ändern.

Ich persönlich erstelle gerne einen Ordner für jede Komponente, da später weitere Dateien zum Stylen und Testen hinzugefügt werden können. Wie Sie Ihre Struktur gestalten möchten, liegt natürlich bei Ihnen.

Als nächstes schauen wir uns an, wie man diese Komponente mit erstellt.

<template>
    <component></component>
</template>
<script>
export default {
    name: &#39;dynamic-link&#39;,
    props: [&#39;data&#39;, &#39;type&#39;],
    data() {
        return {
            component: null,
        }
    },
    computed: {
        loader() {
            if (!this.type) {
                return null
            }
            return () => import(`templates/${this.type}`)
        },
    },
    mounted() {
        this.loader()
            .then(() => {
                this.component = () => this.loader()
            })
            .catch(() => {
                this.component = () => import(&#39;templates/default&#39;)
            })
    },
}
</script>

Also, was ist hier los? Standardmäßig unterstützt Vue.js dynamische Komponenten. Das Problem besteht darin, dass Sie alle Komponenten registrieren/importieren müssen, die Sie verwenden möchten.

<template>
    <component></component>
</template>
<script>
import someComponent from &#39;./someComponent&#39;
export default {
    components: {
        someComponent,
    },
}
</script>

Hier gibt es nichts, weil wir unsere Komponente dynamisch nutzen wollen. Wir können also die dynamischen Importe von Webpack verwenden. Bei der Verwendung mit berechneten Werten geschieht hier die Magie: Ja, berechnete Werte können eine Funktion zurückgeben. Super praktisch!

computed: {
    loader() {
        if (!this.type) {
           return null
        }
        return () => import(`templates/${this.type}`)
    },
},

Nach der Installation unserer Komponente versuchen wir, die Vorlage zu laden. Wir können eine Fallback-Vorlage einrichten, falls etwas schief geht. Möglicherweise wäre dies hilfreich, um dem Benutzer eine Fehlermeldung anzuzeigen.

mounted() {
    this.loader()
        .then(() => {
           this.component = () => this.loader()
        })
        .catch(() => {
           this.component = () => import('templates/default')
        })
},

Fazit

Kann nützlich sein, wenn Sie viele verschiedene Ansichten einer Komponente haben.

• Einfach zu erweitern.

• Es ist asynchron. Vorlagen werden nur bei Bedarf geladen.

• Halten Sie Ihren Code sauber.

Das ist im Grunde alles!

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die dynamische Komponentenvorlage von Vue.js (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!