Vue 组件 props 的默认值写法,应该被简化

父组件调用子组件,可能会传值,也可能不传值。比如这种,传了变量 tabs 及数字 0 <tab :data="tabs" :initialIndex="0"></tab>;或者像这样,不传任何值<tab></tab>

为保证无论传值与否都不报错,则需要给子组件的 props 属性设定一个默认值。例如下面这样

    props: {
        data: {
            type: Array,
            default() {
              return [] //默认空数组
            }
        },
        initialIndex: {
            type: Number,
            default: 0  //默认值
        }
    }

总感觉设定默认值的写法很繁琐(大括号里面必须加两个键 type 和 default,甚至 default 有时还必须以函数的形式出现)。可以换个办法:拿到 props 后立即放进 $data 里!就像下面这样

    props:{
        initialIndex: Number,
        data: Array,
    },
    data(){
        return{
            index: this.initialIndex|| 0,   //默认0
            tabs: this.data|| [],           //默认[]
        }
    }

此法相对简洁,更重要的是克服了 props 单向传值的缺陷(尝试改变 initialIndex 值会报错,但是改变 $data 里面的 index 值则没问题)。

此法的缺点是多出一套属性名index和tabs(对应于props里面的initialIndex和data)。给变量取名是个让人费心的事情,英文越差越头大。索性给 props 取个通用的名字(比如 data),真正有意义的名字则放在 data(){...} 里面。

上面两种写法都有明显的缺陷,期望的写法是下面这样

    props:{
        initialIndex: 0,   //默认值为0,可惜目前版本不支持这样的写法
        data: [],          //默认空组数,也不支持
    }
讨论数量: 3

不是只能接收对象的,还可以是字符串数组
Array | Object
props 可以是数组或对象,用于接收来自父组件的数据。props 可以是简单的数组,或者使用对象作为替代,对象允许配置高级选项,如类型检测、自定义校验和设置默认值。

4天前

个人感觉下面的写法太烦了

    props: {
        ooh: {
            type: Array,
            default() {
              return [] //默认空数组
            }
        }
    }

我的要求很低,只要能给 ooh 设定一个空数组作为默认值就OK了。我尝试将上面的写法简化成下面这样

    props:{
        ooh: [],       //默认空组数
    }

瞧瞧,多简单的写法!一看就明了的:类型是数组,默认空数组。如果外部传入了ooh,就直接用传入的值;如果外部没传值进来,那就用默认的空数组。

再回头看看第一种写法:一个大括号,括住一个type,再括住一个default(){},default里面再返回空数组作为默认值……能不能不要这么繁杂?

4天前

以下同理,类型分别是数组、对象、字符串,默认值分别是[]、{}、 ''

    props:{
        ooh: [],       //默认空组数
        oho: {},       //默认空对象
        hoo: ''        //默认空字符串
    }

.
没必要搞得下面这般复杂吧

    props:{
        ooh: {
            type: Array,
            default() {
              return []
            }
        },
        oho: {
            type: Object,
            default() {
              return {}
            }
        },
        hoo: {
            type: String,
            default: ''
        }
    }
3天前

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!