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>
  • 相关阅读:
    LDA模型了解及相关知识
    GAN
    tensorflow学习6
    GAN的文献综述
    python相关工具
    tensorflow学习5----变量管理
    tensorflow学习5----GAN模型初探
    8月14日至8月20日技术积累
    8月7日至8月13日技术积累
    8月1日到8月6日技术要点
  • 原文地址:https://www.cnblogs.com/ToBeBest/p/15666438.html
Copyright © 2011-2022 走看看