uni-app中怎麼下載插件

方法：1、下載元件，解壓縮到uni-app根目錄；2、在指定頁面中匯入元件，語法「import 元件名稱from "元件檔案位址"」；3、在components選項中定義元件；4、在template節點依照元件使用說明，呼叫元件並傳值。

本教學操作環境：windows7系統、uni-app2.5.1版，DELL G3電腦。

本文以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節點依照元件使用說明，呼叫元件並傳值，如下：

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

完整程式碼範例如下：

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

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

#推薦學習：Uni-App從入門到實戰教學

以上是uni-app中怎麼下載插件的詳細內容。更多資訊請關注PHP中文網其他相關文章！