Vue2-props--type

type

对于 props 属性中的 type 选项，它用于指定 prop 的类型。可以是以下原生构造函数之一：String、Number、Boolean、Array、Object、Date、Function、Symbol、Promise，也可以是自定义构造函数。如果需要接受多种类型，可以将这些类型放在一个数组中。通过指定 type，可以确保父组件传递给子组件的属性符合预期的数据类型

（1）原生构造函数

1. 父组件定义

new Vue({
  el: '#app',
  data: {
    stringData: 'Hello, Vue!',
    numberData: 11,
    booleanData: true,
    arrayData: ['apple', 'banana', 'orange'],
    objectData: { name: 'lee' },
    dateData: new Date(),
    functionData: function () {
      console.log('Function triggered!');
    },
    symbolData: Symbol('description'),
    promiseData: new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('Promise resolved!');
      }, 2000);
    })
  }
});

2. 组件传参

<div id="app">
  <my-component
    :string-prop="stringData"
    :number-prop="numberData"
    :boolean-prop="booleanData"
    :array-prop="arrayData"
    :object-prop="objectData"
    :date-prop="dateData"
    :function-prop="functionData"
    :symbol-prop="symbolData"
    :promise-prop="promiseData"
  ></my-component>
</div>

3. 子组件定义

Vue.component('my-component', {
  props: {
    stringProp: String,
    numberProp: Number,
    booleanProp: Boolean,
    arrayProp: Array,
    objectProp: Object,
    dateProp: Date,
    functionProp: Function,
    symbolProp: {
      type: Symbol,
      default: Symbol('description')
    },
    promiseProp: {
      type: Promise
    }
  },
  methods: {
    triggerMethod() {
      this.functionProp();
    },
    async executePromise() {
      try {
        const result = await this.promiseProp;
        console.log(result);
      } catch (error) {
        console.error(error);
      }
    }
  },
  template: `
    <div>
      <p>{{ stringProp }}</p>
      <p>{{ numberProp }}</p>
      <p>{{ booleanProp }}</p>
      <ul>
        <li v-for="item in arrayProp">{{ item }}</li>
      </ul>
      <p>{{ objectProp.name }}</p>
      <p>{{ dateProp }}</p>
      <button @click="triggerMethod">Trigger Function</button>
      <button @click="executePromise">Execute Promise</button>
      <p>{{ symbolProp }}</p>
    </div>
  `
});

（2）自定义构造函数

// 自定义构造函数
function MyCustomType(value) {
  this.value = value;
}
new Vue({
  el: "#app",
  data: {
    customData: new MyCustomType("Custom value"),
  },
  template: `<my-component :custom-prop="customData"></my-component>`,
  components: {
    "my-component": {
      props: {
        customProp: MyCustomType,
      },
      template: `<div>{{ customProp.value }}</div>`,
    },
  },
});

（3）混合类型

new Vue({
  el: "#app",
  data: {
    stringData: "Hello, Vue!",
    numberData: 22,
    arrayData: ["apple", "banana", "orange"],
    objectData: { name: "lee2" },
  },
  template: `<div>
    <my-component :mixed-prop="stringData"></my-component>
    <my-component :mixed-prop="numberData"></my-component>
    <my-component :mixed-prop="arrayData"></my-component>
    <my-component :mixed-prop="objectData"></my-component>
    </div>
    `,
  components: {
    "my-component": {
      props: {
        mixedProp: [String, Number, Array, Object],
      },
      template: `<div>{{ JSON.stringify(mixedProp) }}</div>`,
    },
  },
});