[JavaScript知识库]02-声明-props

一. <script setup> defineProps 方式声明，并设置默认值

1. 直接赋值

const props = defineProps({
  loading: Boolean,
  width: {
    type: String as PropType<string>,
    default: '100%',
  },
  height: {
    type: String as PropType<string>,
    default: '300px',
  },
});

2. withDefaults

interface Form {
  stationType: undefined | number;
  stationNmae: undefined | string;
  position: object;
  isIntra: number[];
  id?: string;
}
const props = withDefaults(
  defineProps<{
    show: boolean;
    info: Form;
  }>(),
  {
    show: false,
    info: () => {
      return {
        stationType: undefined,
        stationNmae: undefined,
        position: {},
        isIntra: [],
      };
    },
  },
);

二.<script>props声明

import { defineComponent, PropType } from 'vue';

interface ObjType {
  key: string;
  title: string;
}
export default defineComponent({
  props: {
    detail: {
      type: Object as PropType<ObjType>,
      default: () => {},
    },
  },
})

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖