vue2-props-required必填项

发布时间 2023-07-02 23:19:29作者: Young_Yang_Yang

props的required必填项

<template>
    <div>
        <h5>Count 组件</h5>
        <p>count的值是:{{ count }}</p>
        <button @click="add">+1</button>
    </div>
</template>

<script>
export default {
    // props是自定义属性,允许使用者通过自定义属性,为当前组件指定初始值
    // 自定义属性的名字,是封装者自定义的(只要名称合法即可)
    // props中的数据,可以直接在模板结构中使用
    // 注意:props是只读的,不要直接修改 props的值,否则终端会报错!
    // props: ['init'],
    props: {
        'init': {
            // 如果外界使用 Count 组件的时候,没有传递 init 属性,则默认值生效
            default: 0,
            // init的值类型必须是Number数字
            type: Number,
            // 必填项校验
            required: true
        }
    },
    name: "Count",
    data() {
        return {
            count: this.init
        }
    },
    methods: {
        add() {
            this.count += 1
        }
    }
}
</script>

<style lang="less">

</style>