Vue props傳遞的類型和寫法


Vue props傳遞的類型和寫法

1、props常用屬性

type (規定數據類型)
  String 字符串
  Number 數字
  Boolean 布爾
  Array 數組 
  Object 對象
  Date 日期
  Function 函數
  Symbol 獨一無二的值(es6)

default
  default : (默認值)
  基礎數據類型: 直接賦值
  對象數據類型: 用函數賦值 ()=>[]
required
  required: (必填項)
  默認為false,說明父級必須傳入,否則會報錯
validator
  validator: 校驗(驗證傳入的值是否符合規定)


 validator
  validator: 校驗(驗證傳入的值是否符合規定)

2、props的語法

1、數組語法

props: ['size', 'myMessage'] //不限制數據類型 

2、對象語法

props: {
    // 基礎的類型檢查 (`null` 和 `undefined` 會通過任何類型驗證)
    propA: Number,
    // 多個可能的類型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true,
    },
    // 帶有默認值的數字
    propD: {
      type: Number,
      default: 100,
    },
    // 具有默認值的數組寫法
    propK: {
      type: Array,
      // 對象或數組默認值必須從一個工廠函數獲取
      default: function () {
        return ["張三"];
      },
    },
    // 帶有默認值的對象
    propE: {
      type: Object,
      // 對象或數組默認值必須從一個工廠函數獲取
      default: function () {
        return { message: "hello" };
      },
    },
    // 自定義驗證函數
    propF: {
      validator: function (value) {
        // 這個值必須匹配下列字符串中的一個
        return ["success", "warning", "danger"].indexOf(value) !== -1;
      },
    },
  },

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM