vue3-04

子组件

例1

定义子组件 Child1

父组件引用

例2

首先添加类型说明 model/ModelRandomUser.ts

import { AxiosResponse } from "axios";
export interface AxiosRespResults extends AxiosResponse{}

export interface Results {
  info: {
    page: number,
    results: number
  },
  results: Result[]
}

export interface Result {
  gender: 'male' | 'female',
  name: {
    first: string,
    last: string
  },
  location: {
    country: string
  },
  picture: {
    medium: string
  },
  login: {
    username: string
  }
}

子组件不变，父组件使用子组件

如果觉得 Result 数据结构嵌套太复杂，还可以做一个类型映射

resultToUser 将 Result 类型映射为 User 类型