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