美文网首页
vue3+ts之 PropType

vue3+ts之 PropType

作者: 小李不小 | 来源:发表于2021-07-23 22:36 被阅读0次

    PropType

    Vue3官方props介绍

    基础props验证看传送门

    PropType的理解

    <script lang='ts'>
    import {defineComponent, PropType} from 'vue'
    export interface ColumnProps{
        id: string;
        title: string;
        avatar: string;
        description: string;
    }
    export default defineComponent({
        name:'ColumnList',
        props:{
            list:{
                type:Array as PropType<ColumnProps[]>,
                required:true
            }
        }
    })
    </script>
    
    1. 用一句简单的话来说,就是为了类型推论,让我们在使用属性的时候获取更丰富的类型提示,比如在这里我们定义了一个属性 list,使用 vue 默认的 Array,只能确定它是一个数组类型,不能确定数组里面的每一项到底是什么样子的。你在 setup 中,看 props.list 就是一个any数组,但是如果使用PropType <ColumnProps[]> 这个时候,props.list 就变成一个 ColumnProps 的数组,你使用它的时候不论在 ts 中还是模版中都能获得类型的推断和自动补全等等。
    2. 属性校验

    相关文章

      网友评论

          本文标题:vue3+ts之 PropType

          本文链接:https://www.haomeiwen.com/subject/bntmmltx.html