概述

在事项管理平台开发中，需要使用相关的自定义组件进行使用，通过组件的封装达到业务或者视图重用！

本文阐述了如何创建一个自定义vue型的组件以及使用！使用adf-button创建一个组件为示例！

学会了一个组件的创建与使用，就明白如何创建组件达到共用代码共用的目的！

组件的创建

需要符合一定的规范来进行

1、在开发环境下创建components目录

2、components目录下创建adf-button的文件夹

3、在当前目录下编写相关的组件 这里使用 adf-button.vue

结构图如下

按照这样的约定来进行写

自定义控件adf-button.vue内容如下

<template>
	<view class="adf-btn" @click="handleClick">
		<text style="color: #ccc;">{{buttonText}}</text>
	</view>
</template>

<script>
	export default{
	
		props:{
			buttonText:{
				type:String,
				default:'Click me'
			}
		},
		methods:{
			handleClick(){
				this.$emit('click')
			}
		}
	}
</script>

<style>
	.adf-btn{
		border: 1px solid #000;
	}
</style>

一个自定义控件就创建好了！

控件引用与使用

（1）easycom 方式 手工导入一使用

在pages.json定义如下

其中

"^adf-(.*)": "@/components/adf-$1/adf-$1.vue"

表示控件使用adf-开头，然后adf-开头的控件目录，然后是具体的文件 ,

比如adf-button这个控件，使用的是adf-button目录，核心控件文件是adf-button.vue

这样在全局所有的页面上都可以使用当前的控件

使用的方法与uniapp其他控件一样的使用

<adf-button button-text="abc"></adf-button>

(2) 在指定页面上通过手工的方式来使用

具体的使用与全局引用是一致的！

共创、共享、共赢！