uniapp組件全方位剖析

一、uniapp組件庫

uniapp是一個同時支持多個平台的開發框架，由於其極大的便捷性和高效性，越來越多的開發者使用它開發多端應用。而為了更好地開發應用，uniapp提供了常用的、豐富的組件庫，讓開發者可以直接使用。

uniapp組件庫的主要有兩種類型：官方組件庫和第三方組件庫。官方組件庫是uniapp開發團隊維護的，包含了一些常見、實用的組件，比如按鈕、輸入框、列表、滑動框等。第三方組件庫則是開發者們自主開發的，這些組件庫包含了更多的自定義組件，比如地圖組件、表格組件等。

在開發過程中，我們可以根據自己的需求去選取合適的組件，以達到更好的開發效果。

二、uniapp用什麼組件庫

在uniapp開發中，如果只是一些簡單的界面組件，我們可以使用官方組件庫。但是如果我們需要一些自定義的組件，那麼我們需要藉助第三方組件庫。

目前市面上比較流行的uniapp第三方組件庫有三種：vant、color-ui和cube-ui。這些組件庫都有其優點和缺點，我們需要針對具體的場景進行選擇。

比如vant組件庫適用於移動端開發，支持多種主題樣式，自定義性強，可擴展性好。而color-ui組件庫則適合小程序和H5開發，輕量級，有著簡潔的設計和良好的兼容性。cube-ui組件庫則適用於大型應用開發，組件之間耦合度低，易於維護。

三、uniapp組件傳遞

在uniapp中，我們可以使用props屬性來進行組件傳遞。props是組件的一個屬性，用於接受外部傳遞的數據。通過這種方式，我們可以將父組件中的數據傳遞給子組件，實現數據的共享。

具體實現方式如下：

{
    // 父組件中
    <template>
        <child :message="msg"></child>
    </template>
    data(){
        return {
            msg: 'hello world'
        }
    }
}
{
    // 子組件中
    <template>
        <div>{{ message }}</div>
    </template>
    props: {
        message: String
    }
}

四、uniapp組件跳轉

在uniapp中，跳轉頁面有兩種方式：navigateTo和switchTab。navigateTo用於跳轉到非tabBar的頁面，switchTab用於跳轉到tabBar頁面。我們還可以使用組件傳值的方式，在新頁面中獲取上個頁面傳遞的數據。

具體實現方式如下：

{
    // 跳轉前的頁面
    <template>
        <button @click="jumpToPage">跳轉到新頁面</button>
    </template>
    methods: {
        jumpToPage() {
            uni.navigateTo({
                url: 'newPage?id=1&name=Hello World'
            });
        }
    }
}
{
    // 新開啟的頁面
    <template>
        <div>ID：{{ id }}</div>
        <div>NAME：{{ name }}</div>
    </template>
    onLoad(options) {
        console.log(options)
        // 輸出 {id: 1, name: "Hello World"}
        this.id = options.id;
        this.name = options.name;
    }
}

五、uniapp組件封裝

在uniapp開發中，我們常常需要封裝一些常用的組件，以便於重複使用。下面是一個簡單的組件封裝示例：

{
    // 封裝的組件
    <template>
        <div class="list">
            <div class="list-item" v-for="(item, index) in list" :key="index">
                {{ item }}
            </div>
        </div>
    </template>
    props: {
        list: {
            type: Array,
            default: () => []
        }
    }
}
{
    // 使用封裝的組件
    <template>
        <list-component :list="list"></list-component>
    </template>
    import listComponent from '@/components/listComponent.vue';
    export default {
        components: { listComponent },
        data(){
            return {
                list: ['item1', 'item2', 'item3']
            }
        }
    }

六、uniapp組件show

在uniapp中，我們可以通過v-show和v-if指令來控制組件的顯示與隱藏。其中v-show的方式是通過修改其CSS樣式display屬性來實現的，而v-if則是將該組件從DOM樹中移除。

具體實現方式如下：

{
    // v-show的使用方法
    <template>
        <div v-show="isShow">hello world</div>
    </template>
    data() {
        return {
            isShow: true
        };
    }
}
{
    // v-if的使用方法
    <template>
        <div v-if="isShow">hello world</div>
    </template>
    data() {
        return {
            isShow: true
        };
    }
}

七、uniapp組件傳值

在uniapp組件間傳值時，有兩種方式：props和事件傳遞。props是通過屬性傳遞的方式，而事件傳遞則是通過觸發事件來傳遞數據。

具體實現方式如下：

{
    // props傳遞數據
    <template>
        <div>{{ message }}</div>
    </template>
    props: {
        message: String,
    }
}
{
    // 事件傳遞數據
    <template>
        <button @click="passData">傳遞數據</button>
    </template>
    methods: {
        passData() {
            this.$emit('message', 'hello world');
        }
    }
}
{
    // 接收數據
    <template>
        <child-component @message="getMessage"></child-component>
    </template>
    methods: {
        getMessage(msg) {
            console.log(msg);
            // 輸出 hello world
        }
    }
}

八、uniapp組件生命周期

組件生命周期是指組件從創建到銷毀的整個過程。在uniapp中，組件生命周期可分為多個階段執行，每個階段都有著相應的生命周期函數，開發者可以在這些函數中對組件進行操作。

組件的生命周期分為8個階段，分別是：created、beforeMount、mounted、beforeUpdate、updated、activated、deactivated、beforeDestroy、destroyed。

{
    // 生命周期回調函數
    <template>
        <div>hello world</div>
    </template>
    methods: {
        created() {
            console.log('created')
        },
        beforeMount() {
            console.log('beforeMount')
        },
        mounted() {
            console.log('mounted')
        },
        beforeUpdate() {
            console.log('beforeUpdate')
        },
        updated() {
            console.log('updated')
        },
        activated() {
            console.log('activated')
        },
        deactivated() {
            console.log('deactivated')
        },
        beforeDestroy() {
            console.log('beforeDestroy')
        },
        destroyed() {
            console.log('destroyed')
        }
    }
}

九、uniapp組件庫有哪些

uniapp提供了豐富的組件庫，這些組件庫包含了開發常用的、實用的組件。以下是uniapp組件庫部分展示：

• 基礎組件: 包括按鈕、輸入框、圖標等常用組件
• 布局組件: 包括柵格系統、面板、滑動框等組件
• 導航組件: 包括標籤頁、導航欄、側邊欄等常用導航組件
• 操作反饋組件: 包括彈出框、消息提示、載入中等反饋組件
• 表單組件: 包括表單、時間選擇器、地區選擇器等常用組件
• 業務組件: 包括日曆、地圖、分享等業務相關組件

以上是uniapp組件庫的一部分，開發者們可以根據自身需求進行選取使用。