vue3.0+ts+setup语法糖props写法

写法一

import defaultImg from '@/assets/images/defaultImg.png'

const props = defineProps({
  src: {
    type: String,
    default: ''
  },
  title: {
    type: String,
    default: '图片'
  },
  defaultImg: {
    type: String,
    default: defaultImg
  }
})

写法二

import { reactive } from 'vue'
import defaultImg from '@/assets/images/defaultImg.png'

interface DataProps {
  src: string
  title: string
  defaultImg: string
}
const props: DataProps = reactive({
  src: '',
  title: '图片',
  defaultImg
})

使用方式

<template>
  <img :src="props.src" :title="props.title" @error="imgError"/>
</template>

完整示例二:

<template>
  <van-icon
    class="iconfont"
    class-prefix='icon'
    :name='props.name'
    :dot='props.dot'
    :badge='props.badge'
    :color='props.color'
    :size='props.size'
    :class='props.className'
    @click="emit('click')" />
</template>
<script setup lang="ts">
import { reactive } from 'vue'
interface DataProps {
  name: string
  dot: boolean
  badge: number | string
  color: string
  size: number | string
  className: string
}
const props: DataProps = reactive({
  name: '',
  dot: false,
  badge: null,
  color: 'inherit',
  size: 'inherit',
  className: ''
})
</script>