vue3 widthDefaults 设置props默认值

测试代码

<template>
  <div class="box">
    <div><i-ep-edit /></div>
    <div><i-ep-chat-dot-round /></div>
    <div><i-ep-close /></div>
  </div>
</template>
<script lang="ts" setup>
// import { ref, reactive, computed, onMounted, nextTick } from 'vue';

interface Props {
  arr: Array<{ name: string }>;
  arr2: Array<{ name: string }>;
  my: string;
  it: number;
}
const props = withDefaults(defineProps<Props>(), {
  arr: () => [], //object对象得函数方式返回，不能直接给空数组，原因是类型限定就是得函数的方式传回object对象数据
  // type NativeType = null | number | string | boolean | symbol | Function;
  // type InferDefault<P, T> = ((props: P) => T & {}) | (T extends NativeType ? T : never);
  my: "",
});

const { arr, arr2, my, it } = props;

console.log(arr, "arrslfkjslfjslf"); //[], 说明default默认值设置是有效的
console.log(arr2, "arr2slkdfjlskfjlksjfksjd"); //undefined ，没设置默认值就是undefined

console.log(my, "myslkdfjsldfjsldfjsldfjsldf"); // "", 说明default默认值设置是有效的

console.log(it, "itslkdfjsldfjsldfjsldfjsldf"); // undefined, 没设置默认值就是undefined
arr.map((i) => {
  console.log(i.name, "slndvsldjslfkjskf");
});
</script>
<style lang="stylus" scoped></style>