【转载】vue3 PropType

C_J_Y__

已于 2022-03-15 17:59:35 修改

阅读量581

点赞数

文章标签： vue.js javascript ecmascript

于 2022-03-15 17:58:32 首次发布

原文链接：https://blog.csdn.net/qq_30497875/article/details/114014041?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164733748416780357274981%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=1647

版权

原文链接：https://blog.csdn.net/qq_30497875/article/details/114014041?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164733748416780357274981%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=1647

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>

用一句简单的话来说，就是为了类型推论，让我们在使用属性的时候获取更丰富的类型提示，比如在这里我们定义了一个属性 list，使用 vue 默认的 Array，只能确定它是一个数组类型，不能确定数组里面的每一项到底是什么样子的。你在 setup 中，看 props.list 就是一个any数组，但是如果使用PropType <ColumnProps[]> 这个时候，props.list 就变成一个 ColumnProps 的数组，你使用它的时候不论在 ts 中还是模版中都能获得类型的推断和自动补全等等。
属性校验