uniapp-x 子父组件通信 defineEmits/defineProps/import type

uniapp-x 子父组件通信

defineEmits 传出回调子组件数据

defineProps 接入父页面数据 (解决 数组结构导入报错)

import type 定义数据结构类型 (解决 类型导入无效报错找不到原因)

Promise 封装的接口回调数据 类型转型

UTSJSONObject 结构类型 转 专属类型

子组件:

<template>
	<view class="Flex" v-for="v in data" :key="v.name" @tap="tapClick(v)">
		<image class="icon" :src="v.image" v-if="v.image != ''"></image>
		<text class="text" :id="v.name">{{v.name}}</text>
	</view>
	<text class="date">{{data?.date?.year}}{{data?.date?.month}}{{data?.date?.day}}</text>
</template>

<script setup>
	import {
		ref,
		reactive,
		PropType
	} from 'vue'
	import {
		InfoType,
		XXXDataType
	} from '../static/type/lottery.uts' //引入类型
	import {
		Data
	} from '../all/data/lottery.uts'; //调用数据
 	
	const props = defineProps<{
		data : DataType | null
      	arrxx: DataType | null
	}>()
	
    const emit = defineEmits<{
		(e : 'change', data : DataType, index : number) : void
	}>()
  
	const tapClick = (res:XXXDataType) => {
		emit("chenge", {
			data: res,
			index: i,
		});
	}
</script>

<style lang="scss" scoped>
	
</style>

父页面:

<template>
	<Menu :data="Data" :index="1" @chenge="chengeMenu"></Menu>
</template>

<script setup lang="uts">
	import { ref, reactive } from 'vue'
	import { InfoType,XXXDataType } from '../../static/type.uts'
	import { Data } from '../../all/data';
	
	let lotteryData = reactive<XXXDataType | null>(null)
	const chengeLotteryMenu = (v : UTSJSONObject | null) => {
		if (v == null) return;
		const data = v['data'] as XXXDataType;
		lotteryData = data;
	}

</script>

<style lang="scss" scoped>

</style>

UTS Type定义

import { reactive } from 'vue'

export type MaxminType = {
	min_a : number, min_b : number, min_c : number, max_a : number, max_b : number, max_c : number
}
export type NumberType = {
	num_a : string[] | null, num_b : string[] | null, num_c : string[] | null, sum : number
}

export type XXXDataType = {
	id : number | string, blok?: string, type : string, name?: string,
	number : NumberType,
}
export type InfoType = {
	id : number, blok : string, type : string, name : string,
	maxmin : MaxminType,
}

UTS 赋值

for (let v of List) {
	data.value.push({
		id: v.id ,
		issue: v.issue,
		blok: v.blok,
		type: v.type,
		name: v.name,
		number_sum: v.number_sum,
	} as lotteryDataType) //必须加 as 类型
}

UTS 报错可变属性问题

需要将对象结构 let 定义改为const 方式

UTS 深度拷贝

const Arr = Arrxxx.map(row => row.slice()) as number[][] //二维
const Arr = Arrxxx.map(row => row.slice()) as number[] //一维

UTS string转number

let x = parseFloat(s) as number

UTSJSONObject 转 专属类型

getData().then((res) => {
	if (res == null) return;
		const code : number = (res as UTSJSONObject)['code'] as number;
		const msg : string = (res as UTSJSONObject)['msg'] as string;
		const arr = (res as UTSJSONObject)['data'] as UTSJSONObject[] //1.对象转型 先取出
		const data: xxType[] = JSON.parse<xxType[]>(JSON.stringify(arr))! //2.对象转型 再转型
		if (data != null) {
			console.log(data)
		}
	})
const obj = (uni.getStorageSync('user')! as UTSJSONObject) as UTSJSONObject //1.对象转型 先取出
const user: userType= JSON.parse<userType>(JSON.stringify(obj))! //2.对象转型 再转型
分享你的喜爱
linwute
linwute

我要像梦一样自由,像大地一样宽容;
在艰辛放逐的路上,点亮生命的光芒;
我要像梦一样自由,像天空一样坚强;
在曲折蜿蜒的路上,体验生命的意义;

留下评论

您的邮箱地址不会被公开。 必填项已用 * 标注