一文详解uniapp中如何使用easycom自定义组件

一、概述

easycom是基于uni-app框架开发的自定义组件解决方案，可以帮助开发者在uni-app中快速开发自定义组件。本篇文章将详细讲解如何使用easycom自定义组件。

二、准备工作

在进行easycom自定义组件之前，需要先安装“uni-center-cli”、 “vue-cli-plugin-easycom”和“easycom-cli”三个插件，安装过程如下：

1.安装uni-center-cli

npm install @vue/cli @vue/cli-service-global -g

2.安装 vue-cli-plugin-easycom 插件

vue add easycom

3.安装 easycom-cli 插件

npm install @easycom/cli -g

安装完成后，就可以开始编写和使用easycom自定义组件了。

三、创建easycom自定义组件

1.创建组件文件夹

在uni-app项目的components文件夹下创建一个名为“myComponent”自定义组件文件夹。

2.编写组件代码

在“myComponent”文件夹内创建一个“my-button.vue”文件，编写一个简单的按钮组件代码：

<template>
    <button @click="handleClick">{{text}}</button>
</template>
<script>
    export default {
        props: {
            text: {
                type: String,
                default () {
                    return '按钮'
                }
            }
        },
        methods: {
            handleClick () {
                this.$emit('click')
            }
        }
    }
</script>

3.配置easycom.json

在项目根目录下创建一个easycom.json文件，配置easycom.json如下：

{
    "easycom": {
        "^my-": ["./components/myComponent/*.vue"]
    }
}

easycom配置中，"^my-": 表示匹配以“my-”开头的组件名，紧随配置的是组件的路径，"./components/myComponent/*.vue"表示匹配components文件夹下的myComponent文件夹下的所有.vue文件。

4.使用自定义组件

在需要使用自定义组件的uni-app页面中，直接使用自定义组件标签，如下：

<template>
    <view>
        <my-button text="确定" @click="handleClick"></my-button>
    </view>
</template>
<script>
    import MyButton from '@/components/myComponent/my-button.vue'
    export default {
        components: {
            MyButton
        },
        methods: {
            handleClick () {
                uni.showToast({
                    title: '按钮被点击了',
                    icon: 'none'
                })
            }
        }
    }
</script>

四、easycom的使用示例

为了更好的理解和掌握easycom的使用，本文提供两个easycom自定义组件的具体实现示例。

1.在uni-app中使用vant组件库

1）安装vant组件库

npm i vant -S

2）引入组件库

在main.js中全局引入vant组件库：

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

3）在easycom.json中配置

{
    "easycom": {
        "^van-": "vant-weapp/dist/components"
    }
}

4）在页面中使用vant组件

<template>
    <van-button type="primary" @click="handleClick">按钮</van-button>
</template>
<script>
    export default {
        methods: {
            handleClick () {
                uni.showToast({
                    title: '按钮被点击了',
                    icon: 'none'
                })
            }
        }
    }
</script>

2.基于vant自定义组件

1）在components文件夹下创建一个customButton文件夹，用于存放自定义组件。

2）在easycom.json中配置自定义组件

{
    "easycom": {
        "^custom-": ["./components/customButton/*.vue"],
        "^van-": "vant-weapp/dist/components"
    }
}

3）在customButton文件夹下创建一个custom-button.vue文件，代码如下：

<template>
    <van-button :type="type" :size="size" @click="handleClick">{{text}}</van-button>
</template>
<script>
    import { mapPropsToData } from 'vant-weapp/dist/common/utils';

    export default {
        name: 'custom-button',
        props: {
            size: String,
            type: String,
            text: String
        },
        data: () => ({
            button: {}
        }),
        created() {
            this.button = mapPropsToData('van-button', this);
        },
        methods: {
            handleClick(e) {
                this.$emit('click', e);
            }
        }
    };
</script>

4）在页面中使用自定义组件

<template>
    <view>
        <custom-button type="primary" size="small" text="自定义按钮" @click="handleClick"></custom-button>
    </view>
</template>
<script>
    export default {
        methods: {
            handleClick () {
                uni.showToast({
                    title: '自定义按钮被点击了',
                    icon: 'none'
                });
            }
        }
    }
</script>

以上两个easycom自定义组件示例可供参考，帮助读者更好的理解和掌握easycom的使用方法。

五、总结

以上介绍了easycom自定义组件在uni-app中的应用，希望对开发者们有所帮助。初次使用easycom自定义组件可能会遇到一些问题，需多加尝试和实践。