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

props自定義屬性

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

2.語(yǔ)法：可以定義為數(shù)組類型的：

export default {
? ? props:['init']
}

也可以定義為對(duì)象類型：

export default {
? // props 是"自定義屬性"，允許使用者通過(guò)自定義屬性，為當(dāng)前組件指定初始值
? // 自定義屬性的名字，是封裝者自定義的（只要名稱合法即可）
? // props 中的數(shù)據(jù)，可以直接在模板結(jié)構(gòu)中被使用
? // 注意：props 是只讀的，不要直接修改 props 的值，否則終端會(huì)報(bào)錯(cuò)！
? // props: ['init'],
? props: {
? ? // 自定義屬性A : { /* 配置選項(xiàng) */ },
? ? // 自定義屬性B : { /* 配置選項(xiàng) */ },
? ? // 自定義屬性C : { /* 配置選項(xiàng) */ },
? ? init: {
? ? ? // 如果外界使用 Count 組件的時(shí)候，沒(méi)有傳遞 init 屬性，則默認(rèn)值生效
? ? ? default: 0,
? ? ? // init 的值類型必須是 Number 數(shù)字
? ? ? type: Number,
? ? ? // 必填項(xiàng)校驗(yàn)
? ? ? required: true
? ? }
? },
}

注意：數(shù)組類型是沒(méi)有default屬性的，只有定義為對(duì)象類型才存在

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: