场景:父组件传一个数组类型数据到子组件,子组件拿到数组需要遍历或者取长度等操作,typescript类型检查报错说length不在unknown上
第一步,父传子
<template> <div > <PrintOrderModal ref="printOrderModal" :repositories="repositories"> </PrintOrderModal> </div> </template> <script lang="ts"> // 忽略文件中所有警告 // /* eslint-disable */ import { defineComponent, onMounted, ref, getCurrentInstance, } from 'vue' import { AttachmentItem } from '@/interface/print' import PrintOrderModal from './PrintOrderModal.vue' export default defineComponent({ name: 'About', components: { PrintOrderModal }, setup (props, context) { const repositories = ref<AttachmentItem[]>([]) setTimeout(() => { repositories.value = [ {text: '父组件参数', value: '1'} ] }, 1000) return { repositories } } }) </script>
第二步,子组件接收数组参数
<template> <div> </div> </template> <script lang="ts"> import { defineComponent, ref, watch, toRef, PropType } from 'vue' import { AttachmentItem } from '@/interface/print' export default defineComponent({ name: 'PrintOrderModal', props: { repositories: { // 方法一:用PropType type: Array as PropType<Array<AttachmentItem>>, default: () => ([]) } }, components: { }, setup(props, context) { // 方法二、用类型断言 const repositories = reactive(props.repositories) as Array<AttachmentItem> return { repositories, }; }, }); </script>
也可以直接使用父组件传过来的参数,但是我这边用于渲染可以,用来访问他的length就报错