vue-props的default写不写有什么区别

注意 default 不要写成 defaults 

例如有一个名为mk-test的组件如下:

<template>
    <div>{{maxLength}}</div>
</template>
<script>
export default {
    props: {
        maxLength: {
            type: Number,
            default: 1
        }
    }
}
</script>

当父组件这样调用时:

<mk-test></mk-test>

渲染出来是:

1

如果把组件的default:1删除,父组件调用方式不变,此时渲染结果是:

0

此时如果父组件改成:

<mk-test maxLength="3"></mk-test>

此时渲染结果是:

3

自我总结:

1、使用default定义默认值时,如果父组件有传值,则用父值渲染。如果父组件没有传值,则使用默认值。

2、没有定义默认值时,如果父组件有传值,则用父值渲染。如果父组件没有传值,则使用的是该类型的默认值。类型及其默认值如下:

String   ''

Number  0

Array []

Object  {}

posted @ 2019-09-06 16:08  Mankii  阅读(5165)  评论(0编辑  收藏  举报
返回顶部