const app = Vue.createApp({
  data() {
    return {
      fun: () => {
        return "a";
      }
    };
  }
});
app.component('props-validation', {
  props: {
    // 單一型別檢查，可接受的型別 String, Number, Object, Boolean, Function(在 Vue 中可使用 Function 驗證型別)
    // null, undefined 會直接通過驗證
    propA: Function,

    // 多個型別檢查
    propB: [String, Number],

    // 必要值
    propC: {
      type: String,
      required: true,
    },

    // 預設值
    propD: {
      type: Number,
      default: 300
    },

    // 自訂函式
    propE: {
      type: Object,
      default() {
        return {
          money: 300
        }
      }
    },

    // 自訂驗證
    propF: {
      validator(value) {
        return value > 1000
      }
    },
  },
  template: `
  {{propA}},<br>
  {{propC}},<br>
  {{propD}} / {{typeof propD}},<br><br>
  {{propE}},<br>
  {{propF}},`
})
app.mount("#app");