zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    第11次作业
    第十次作业
    找回感觉的练习
    Tomact学习笔记
    移动端问题小计
    节流和防抖函数
    requestAnimationFrame动画封装
    svg实现渐变进度圆环
    手机端判断安卓,iso,微信
    git常用指令
  • 原文地址:https://www.cnblogs.com/ToBeBest/p/15666438.html
Copyright © 2011-2022 走看看