自定义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、valuesfunction 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;}}

展示效果