自定义uniapp组件，以picker组件为例

编写目的

本文说明基于vue3定义uniapp组件的关键点：

1、一般定义在components文件夹创建组件，组件与页面已经没有明确的语法格式区别，所以可以与页面的语法保持一致 ；

2、组件定义后使用该组件的页面不需要引用组件即可使用；

3、1级选项利用modelValue属性实现双向绑定，2级选项使用回调函数实现数据回传；

组件源码

在components文件夹下新建vol-picker文件夹，文件夹下新建vol-picker.vue,代码如下： 

<template>
	<up-picker :show="show" :defaultIndex="defaultIndex" ref="uPickerRef" :loading="pickerLoading"
		:closeOnClickOverlay="true" :columns="datas" keyName="label" @confirm="confirm"
		@change="changeHandler"></up-picker>

	<up-input v-model="content.label" border="bottom" :readonly="true" :placement="placement">
		<template #suffix>
			<up-button @click="show = true" type="default" size="mini">
				<up-icon name="arrow-right"></up-icon>
			</up-button>
		</template>
	</up-input>

</template>

<script setup>
	import {ref,reactive,onMounted,defineEmits} from 'vue';

	const uPickerRef = ref(null);

	//选择框是否显示
	const show = ref(false);
	const pickerLoading = ref(false);

	//默认值
	const defaultIndex = ref([0]);

	//选择到的值
	const content = ref({
		label: "",
		name: ""
	});

	onMounted(() => {
		//设置默认值
		if (props.modelValue) {
			//2级
			if (props.datas.length == 2) {

				//查找1级数组索引
				let level1Index = props.datas[0].findIndex(f => f.list.some(s => s.id == props.modelValue));
				if (level1Index > -1) {
					//查找2级数组索引
					let level2Index = props.datas[0][level1Index].list.findIndex(f => f.id == props.modelValue);
					defaultIndex.value = [level1Index, level2Index];
				}
				content.value = props.datas[0][level1Index];
				//设置二级数组
				uPickerRef.value.setColumnValues(1, content.value.list);
			}
			//1级
			else {
				let oldVal = props.datas[0].find(f => f.id == props.modelValue);
				if (oldVal) {

					content.value = oldVal;
					let levle1 = props.datas[0].findIndex(f => f.id == props.modelValue);
					defaultIndex.value = [levle1]
				}
			}
		}

	});

	const props = defineProps({
		modelValue: {
			type: String,
			default: '' //
		},
		
		datas: {
			type: Array,
			default: () => {
				return [
					[] 
				]
			}
		},
		placement: {
			type: String,
			default: ''
		},
		readonly: { //默认是否只读
			type: Boolean,
			default: false
		}

	})
	const emit = defineEmits(['update', 'updateValue']);

	function changeHandler(e) {

		const {
			columnIndex, //列的索引
			value, //是一个数组[]
			values, // values为当前变化列的数组内容
			index // 选值元素的索引
		} = e
		//console.log(e, index)
		// 当第一列值发生变化时，变化第二列(后一列)对应的选项
		if (props.datas.length == 2) {
			//  变更第2列对应的选项
			uPickerRef.value.setColumnValues(1, value[0].list)
		}
	};
	// 回调参数包含columnIndex、value、values
	function confirm(e) {
		// console.log(e)
		//两级选值
		if (props.datas.length == 2) {
			content.value = e.value[1];
			emit("updateValue", e.value);
		}
		 //只有一级选择
		 else {
			content.value = e.value[0];
			 emit("update:modelValue", e.value[0].id);
            //当只有一级选项时，请根据需要 执行回调函数
            //emit("updateValue", e.value);
		}

		// console.log(content.value)
		show.value = false
	}

</script>

使用演示

<vol-picker>是组件文件名称。

<template>

	<vol-picker v-model="formData.Gender" 
:datas="countrys" 
@updateValue="fun_updateValue"
placement="选择">

</template>

<script setup>
	import {ref,reactive,watch,defineProps,defineEmits,defineExpose,getCurrentInstance} from 'vue';

	//示例1：1级选项
	const countrys = reactive([
		[
			{label: '业主',id: "1"},
			{label: '租客',id: "2"},
		]
	])

	//示例2：2级选项
	const countrys = reactive([
		[
			{label: '业主',id: "1",list: [{label: '业主3',id: "3"}, {label: '业主4',id: "4"}]},
			{label: '租客',id: "2",list: [{label: '租客5',id: "5"}, {label: '租客6',id: "6"}]},
		]
		,[]
	])

	const emit = defineEmits(['input,updateValue']);
  

	let formData = reactive({
       Gender: "2"
    });

	//picker回调
	const fun_updateValue = (values) => {
		//2级选项的回调，二级选项时可能展示的数据格式需要不同，因此不使用modelValue 通过回调函数返回选择的值
		if(countrys.length==2){
		    formData.Gender=values[1].id;
		}else{
           //1级选项 时  根据需要回调 ，组件暂时不回调，已通过modelValue实现双向绑定
			//formData.Gender=values[0].id;
		}
	}

展示效果