props

作者: 吃冬瓜的小学生 | 来源:发表于2019-10-26 16:07 被阅读0次

    props

    https://www.jianshu.com/p/ca88cdcea7b4

    1. prop基本用法

      props:['msg','name']    //第一种写法 未验证类型
    //第2中,验证类型
     props: {
            // 基础的类型检查 (`null` 匹配任何类型)
            propA: Number,
            // 多个可能的类型
            propB: [String, Number],
            // 必填的字符串
            propC: {
                type: String,
                required: true
            },
            // 带有默认值的数字
            propD: {
                type: Number,
                default: 100
            },
            // 带有默认值的对象
            propE: {
                type: Object,
                // 对象或数组默认值必须从一个工厂函数获取
                default: function () {
                    return { message: 'hello' }
                }
            },
            // 自定义验证函数
            propF: {
                validator: function (value) {
                    // 这个值必须匹配下列字符串中的一个
                    return ['success', 'warning', 'danger'].indexOf(value) !== -1
                }
            }
    }
    
    • type 可以是下列原生构造函数中的一个:

    String
    Number
    Boolean
    Array
    Object
    Date
    Function
    Symbol

    总结

    • prop 数据单项传递,父影响子,子不影响父
    • 不能在组件中直接修改 prop 传递过来的值,Vue 会给出警告
    • prop 验证时,会在实例创建之前进行验证,所以实例的属性 (如 data、computed 等) 在 default 或 validator 函数中是不可用的
    • 非 prop 特性,组件可以接受任意的特性,而这些特性会被添加到这个组件的根元素上。

    2. 子组件$emit() 待续

    相关文章

      网友评论

          本文标题:props

          本文链接:https://www.haomeiwen.com/subject/mmjlvctx.html