单向数据流

一种组件化中的数据流向的规范：

• 数据总是从父组件向子组件流动
• 子组件不可以改变父组件流入的数据（属性 props）

设置 props

类型

为 props 设置类型使用对象的方式 {prop : type}，props 都可以通过 undefined / null
只要是构造的类型都可以为 props 的类型

<script>
export default {
    props:{
    str: String,
    num: Number,
    bool: Boolean,
    sym: Symbol,    
    obj: Object,
    arr: Array,
    fun: Function,
    date: Date,
    reg: Regexp,    
    p: Promise,
    c: MyClass
  }
}
</script>

或者用一个对象来定义 props 的属性，使用 type 属性来定义类型

<script>
export default {
    props:{
    str: {
        type: String
    },
    num: {
        type: Number
    },
    bool: {
        type: Boolean
    },
  }
}
</script>

默认值

，default 属性为默认值
引用值的默认值是用函数返回一个副本的方式来设置

<script>
export default {
    props:{
    str: {
      type: String,
      default: 'abc'
    },
    num: {
      type: Number,
      default: 123
    },
    bool: {
      type: Boolean,
      default: true      
    }, 
    obj: {
        type: Object,
      default() {
            return {a:1, b:'2'}
        }
    },
    arr: {
        type: Array,
      default() {
          return [1, 'a', 2, 'b']
      }
    }
  }
}
</script>

必要值

required: true，来设置此值必需传入 props

<script>
export default {
    props:{
    str: {
      type: String,
      required: true
    },
    num: {
      type: Number,
      default: 123
    },
  }
}
</script>

验证器

validator 设置一个验证器的 function, return true 通过验证

<script>
export default {
    props:{
    str: {
      type: String,
      validator(val){
          return ['success', 'warning', 'danger'].indexOf(val) !== -1
      }
    } 
  }
}
</script>