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定义
type 定义禁忌:必须放在目录 “/static/xxxtype.uts”
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 报错可变属性问题
error: Smart cast to ‘lotteryInfoType’ is impossible, because ‘LotteryInfo’ is a mutable property that could be mutated concurrently.
需要将对象结构 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.对象转型 再转型