vue【详解】props —— 子组件接收父组件传入的参数

目录

限定参数的类型

限定参数必传

指定参数的默认值

对参数进行自定义校验

---

在子组件中，通过  props 接收父组件传入的参数

限定参数的类型

props:{
    //参数可以任意类型
    params0: null,
    //限定参数的类型为数值型 Number
    params1: Number,
    //限定参数的类型为字符串型，或 数值型 Number
    params2: [String, Number],
},

限定参数必传

props: {
    params3: {
        //限定参数的类型为字符串型
        type: String,
        //限定参数必传
        required: true
    },
},

指定参数的默认值

props: {
    params4: {
        //限定参数的类型为字符串型
        type: String,
        //指定参数默认值为字符串“你好”
        default:'你好'
    },

    // 对象的默认值，都需用工厂函数返回对象的方式指定
    params5: {
        //限定参数的类型为对象
        type: Object,
        //指定参数默认值为对象 { message: "你好" }
        default:function() {
            return { message: "你好" };
        }
    },
},

对参数进行自定义校验

props: {
    // 自定义验证函数——传入的参数的值必须大于100
    params6: {
        isValid: function(value) {
            return value > 100;
        }
    }
},