vue屬性props默認類型怎么寫

這篇“vue屬性props默認類型怎么寫”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“vue屬性props默認類型怎么寫”文章吧。

vue屬性props默認類型

Vue.component('my-component', {
  props: {
    // 基礎的類型檢查 (`null` 匹配任何類型)
    //單個類型
    propA: Number,
    // 多個可能的類型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    //函數
    propC: {
      type:Function,
      required: true
    },
    // 帶有默認值的數字
    propD: {
      type: Number,
      default: 100
    },
    //多個可能類型帶默認值
     propE: {
      type:  [String, Number],
      default: 100
    },
    // 帶有默認值的對象
    propF: {
      type: Object,
      // 對象或數組且一定會從一個工廠函數返回默認值
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定義驗證函數
    propG: {
      validator: function (value) {
        // 這個值必須匹配下列字符串中的一個
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

props自定義屬性

1.這是一個自定義屬性，在封裝通用組件的時候，合理地使用props可以極大的提高組件的復用性

2.語法：可以定義為數組類型的：

export default {
    props:['init']
}

也可以定義為對象類型：

export default {
  // props 是"自定義屬性"，允許使用者通過自定義屬性，為當前組件指定初始值
  // 自定義屬性的名字，是封裝者自定義的（只要名稱合法即可）
  // props 中的數據，可以直接在模板結構中被使用
  // 注意：props 是只讀的，不要直接修改 props 的值，否則終端會報錯！
  // props: ['init'],
  props: {
    // 自定義屬性A : { /* 配置選項 */ },
    // 自定義屬性B : { /* 配置選項 */ },
    // 自定義屬性C : { /* 配置選項 */ },
    init: {
      // 如果外界使用 Count 組件的時候，沒有傳遞 init 屬性，則默認值生效
      default: 0,
      // init 的值類型必須是 Number 數字
      type: Number,
      // 必填項校驗
      required: true
    }
  },
}

注意：數組類型是沒有default屬性的，只有定義為對象類型才存在 

以上就是關于“vue屬性props默認類型怎么寫”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。