So laden Sie Plug-Ins in der Uni-App herunter

Methode: 1. Laden Sie die Komponente herunter und extrahieren Sie sie in das Uni-App-Stammverzeichnis. 2. Importieren Sie die Komponente auf der angegebenen Seite mit der Syntax „Komponentenname aus „Komponentendateiadresse“ importieren“. 4. Befolgen Sie im Vorlagenknoten die Anweisungen zur Komponentenverwendung, rufen Sie die Komponente auf und übergeben Sie den Wert.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Uni-App-Version 2.5.1, DELL G3-Computer.

In diesem Artikel wird am Beispiel von badge (digitales Abzeichen) erläutert, wie Komponenten vom Plug-in-Markt heruntergeladen und importiert werden. badge（数字角标） 为例，说明如何从插件市场下载并导入使用组件。

1、下载组件

从插件市场badge详情页，点击“下载”按钮，下载完成后，解压到uni-app根目录。

2、导入组件

假设page-a.vue页面需要用到badge，则在page-a.vue的script节点下导入badge组件，如下：

import uniBadge from "@/components/uni-badge/uni-badge.vue"

3、定义组件

在components选项中定义badge组件，如下：

export default {  
    data() {  
        return { /* ... */ }  
    },  
    components: {  
        uniBadge  
    }  
}

若从插件市场下载使用多个组件，则每个组件均需在components选项中定义，并以逗号分隔。

4、使用组件

在template

1. Laden Sie die Komponente herunter

Klicken Sie auf der Detailseite des Plug-in-Marktes auf die Schaltfläche „Herunterladen“ und entpacken Sie sie in das Stammverzeichnis uni-app. <a href="https://www.php.cn/course/1238.html" target="_blank"></a><strong>2. Komponenten importieren</strong><br>

Angenommen, die Seite page-a.vue muss badge verwenden, dann in page-a . Importieren Sie die Komponente <code>badge wie folgt unter dem Knoten script: 🎜

<uni-badge text="1"></uni-badge>  
<uni-badge text="2" type="success" @click="bindClick"></uni-badge>

🎜Definieren Sie die Komponente🎜🎜 🎜in Definieren Sie die <code>badge-Komponente in der Option „components“ wie folgt: 🎜

  
<script>  
    import uniBadge from &quot;@/components/uni-badge/uni-badge.vue&quot;  
    /* import 导入的其它组件 */  

    export default {  
        data() {  
            return { /* ... */ }  
        },  
        components: {  
            uniBadge,  
            /* 其它组件定义 */  
        }  
    }  
</script>

🎜Wenn Sie mehrere Komponenten vom Plug-in-Markt herunterladen und verwenden, muss jede Komponente sein in der components-Option Definitionen durch Kommas getrennt. 🎜🎜🎜4. Komponenten verwenden🎜🎜Befolgen Sie im Knoten template die Anweisungen zur Komponentenverwendung, rufen Sie die Komponente auf und übergeben Sie den Wert wie folgt: 🎜rrreee🎜Die vollständige Das Codebeispiel lautet wie folgt: 🎜🎜rrreee 🎜Empfohlenes Lernen: 🎜Uni-App vom Einstieg bis zum praktischen Tutorial🎜🎜🎜

Das obige ist der detaillierte Inhalt vonSo laden Sie Plug-Ins in der Uni-App herunter. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!