自定义三级联动组件

1、新建子组件areaThird.vue

2、父组件引入、注册、使用子组件

<!-- 搞个城市三级联动组件 -->
<template>
    <view class="areawrap">
	    <areaThird :dataConfig="areaThird.default" @selects="selects"></areaThird>
    </view>
</template>

<script>
	import areaThird from './components/areaThird.vue';
	export default {
		components: {
			areaThird
		},
		data() {
			return {
				areaThird:{}
			}
		},
		methods:{
			selects(selects){
				console.log("这是地区子组件传过来的选中的数据",selects);
			}
		}
		
	}
		
</script>

3、子组件代码（仅供参考）

<template>
	<view class='addAddress'>
		<view class="input" type="text" placeholder="请选择地区">
			<picker class="pickerList" mode="multiSelector" 
			:range="newCategotyDataList" 
			:value="multiIndex" 
			:range-key="name"
			@change="bindPickerChange" 
			@columnchange="pickerColumnchange">
				<!-- <view>{{newCategotyDataList[0].name}}--{{newCategotyDataList[0].child[0].name}}--{{newCategotyDataList[0].child[0].child[0].name}}</view> -->
				<view class="">{{select}}</view>
			</picker>
		</view>
	</view>
</template>

<script>
	export default {
		name:'areaThird',
		props: {
			dataConfig: {
				type: Object,
				default: () => {}
			}
		},
		watch: {
			dataConfig: {
				immediate: true,
				handler(nVal, oVal) {
					if(nVal){
						this.getAreaData();
					}
				}
			}
		},
		data(){
			return {
				multiIndex:[0,0,0],
				newCategotyDataList:[[],[],[]],
				categoryArr:[],
				select:"请选择地区",
				selectObj:{}
			}
		},
		onLoad() {
			
		},
		methods:{
			//地区三级联动接口请求
			getAreaData: function() {
				let that = this;
				let app_type = 'weapp';
				let headers={
					  "Content-Type":"application/x-www-form-urlencoded"
				}
				uni.request({
					  url: `数据请求接口`,
					  method: 'POST',
					  header: headers,
					  data: app_type,
					  success: (res)=>{
						  let data = res.data.data;
						  that.categoryArr = data;
							// console.log('成功获取categoryArr数据', that.categoryArr);
						//获取数据并生成uni-app组件支持的数据格式
							for(let i=0; i<that.categoryArr.length; i++){
								// console.log(that.categoryArr[i].name);
								that.newCategotyDataList[0].push(that.categoryArr[i].name);
							}
							for(let i=0; i<that.categoryArr[0].list.length; i++){
								// console.log(that.categoryArr[0].city[i].name)
								that.newCategotyDataList[1].push(that.categoryArr[0].list[i].name);
							}
							for(let i=0; i<that.categoryArr[0].list[0].list.length; i++){
								// console.log(that.categoryArr[0].city[0].area)
								that.newCategotyDataList[2].push(that.categoryArr[0].list[0].list[i]);
							}
							// console.log('获取newCategotyDataList数据', that.newCategotyDataList);
					  },
					  fail: (err)=>{
						  console.log("获取数据失败",err);
					  }
				})
			},
			pickerColumnchange(e){
				// 第几列滑动
				// console.log(e.detail.column);
				// 第几列滑动的下标
				// console.log(e.detail.value)
				// 第一列滑动
				if(e.detail.column === 0){
					this.multiIndex[0] =  e.detail.value
					// console.log('第一列滑动');
					// this.newCategotyDataList[1] = [];
					this.newCategotyDataList[1] = this.categoryArr[this.multiIndex[0]].list.map((item,index)=>{
						// console.log(item)
						return item.name
					})
					// console.log(this.multiIndex)
					if(this.categoryArr[this.multiIndex[0]].list.length === 1){
						this.newCategotyDataList[2] = this.categoryArr[this.multiIndex[0]].list[0].list.map((item,index)=>{
							// console.log(item)
							return item.name
						})
					}else{
						this.newCategotyDataList[2] = this.categoryArr[this.multiIndex[0]].list[this.multiIndex[1]].list.map((item,index)=>{
							// console.log(item)
							return item.name
						})
					}
					// 第一列滑动  第二列 和第三列 都变为第一个
					this.multiIndex.splice(1, 1, 0)
					this.multiIndex.splice(2, 1, 0)
				}
				// 第二列滑动
				if(e.detail.column === 1){
					this.multiIndex[1] =  e.detail.value
					// console.log('第二列滑动');
					// console.log(this.multiIndex)
					this.newCategotyDataList[2] = this.categoryArr[this.multiIndex[0]].list[this.multiIndex[1]].list.map((item,index)=>{
						// console.log(item)
						return item.name
					})
					// 第二列 滑动 第三列 变成第一个
					this.multiIndex.splice(2, 1, 0)
				}
				// 第三列滑动
				if(e.detail.column === 2){
					this.multiIndex[2] =  e.detail.value
				}
			},
			bindPickerChange(e){
				this.multiIndex = e.detail.value;
				// 数组内的下标
				// console.log(this.multiIndex);
				// 获取一级、二级、三级类目
				let one = this.newCategotyDataList[0][this.multiIndex[0]];
				let two = this.newCategotyDataList[1][this.multiIndex[1]];
				let three = this.newCategotyDataList[2][this.multiIndex[2]];
				if(three == undefined){
					three = '无'
				}
				this.select = `${one}-${two}-${three}`;
				this.selectObj = three;
				//向父组件传值
				this.$emit("selects",this.multiIndex);
			},
		}
	}
</script>

<style>
</style>

4、效果