uni-app的父与子页面传递参数之属性Props字段类型解析

向右看齐 2022-12-18 09:54 105阅读 0赞

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 value > 10  
      \}  
    \}  
  \}

type 可以是下面原生构造器：  
  
String  
Number  
Boolean  
Function  
Object  
Array  
Symbol  
type 也可以是一个自定义构造器函数，使用 instanceof 检测。  
  
  
// 自定义Person构造器  
function Person(name, age) \{  
    this.name = name  
    this.age = age  
  \}  
  Vue.component('my-component', \{  
    template: \`<div>名字: \{ \{ person-prop.name \}\}， 年龄： \{ \{ person-prop.age \}\} </div>\`,  
    props: \{  
      person-prop: \{  
        type: Person     // 指定类型  
      \}  
    \}  
  \})  
  new Vue(\{  
    el: '\#app2',  
    data: \{  
      person: 2        // 传入Number类型会报错  
    \}  
  \})