Skip to main content

Props

基础使用​

vue2.x​

<template>
  <div
    :style="{ width: `${width}px`, height: `${height}px` }"
  ></div>
</template>

<script>
export default{
  props: {
    width: { type: Number, default: 600 },
    height: { type: Number, default: 400 },
  },    
}
</script>

vue3.x​

使用defineComponent​

<template>
  <div
    :style="{ width: `${width}px`, height: `${height}px` }"
  ></div>
</template>

<script lang="ts">
export default defineComponent({
  props: {
    width: { type: Number, default: 600 },
    height: { type: Number, default: 400 },
  },    
}) 
</script>

<script setup lang="ts">​

<template>
  <div
    :style="{ width: `${props.width}px`, height: `${props.height}px` }"
  ></div>
</template>

<script setup lang="ts">
// setup 内自动导入
import { defineProps } from "vue"

// 以数组形式定义
const props = defineProps(['name', 'userInfo', 'tags'])

// 通过对象定义
const props = defineProps({
  name: {
    type: String,
    required: false,
    default: 'Petter',
  },
  userInfo: Object,
  tags: Array,
})

// 定义默认值
const props = withDefaults(
  defineProps<{
    iconName: string;
    className?: string;
    color?: string;
    iconPrefix?: string;
  }>(),
  {
    className: '',
    color: 'currentColor',
    iconPrefix: 'icon-yys-',
  }
);

// 定义复杂类型
interface testDataItem {
  name: string;
  id: number;
}

const props = defineProps({
  jsonData: {
    type: Array as PropType<testDataItem[]>,
  },
});
</script>