Vue.js vue-property-decorator @Prop 如何使用接口定义数组

什么是Vue.js vue-property-decorator?

vue-property-decorator是一个用于编写基于类的Vue组件的库。它为我们提供了一些简单而强大的修饰器，用于定义组件的属性、方法和生命周期钩子。

@Prop装饰器

@Prop装饰器用于定义组件的属性。属性可以是父组件传递给子组件的值，也可以是子组件用于向父组件发送消息的方法。

基本用法

在使用@Prop装饰器之前，我们需要先引入它:

import { Prop } from 'vue-property-decorator';

然后，我们可以在组件类中使用@Prop装饰器来定义属性。下面是一个简单的例子：

@Component
export default class MyComponent extends Vue {
  @Prop() message!: string;
}

在上面的例子中，我们使用@Prop修饰器定义了一个名称为message的属性，并指定了它的类型为string。注意，在Vue中使用修饰器时，属性必须以!结尾，表示该属性是一个必需的属性。

设置属性的默认值

我们还可以为属性设置默认值。下面是一个例子：

@Component
export default class MyComponent extends Vue {
  @Prop({ default: 'Hello' }) message!: string;
}

在上面的例子中，如果父组件没有传递message属性，那么message属性的默认值将会是'Hello'。

 

指定属性的类型

如果我们想要指定属性的类型，可以在@Prop装饰器中添加一个type选项。下面是一个例子：

@Component
export default class MyComponent extends Vue {
  @Prop({ type: Array }) items!: string[];
}

在上面的例子中，我们指定了items属性的类型为数组string[]。

如何使用接口定义一个数组属性

在Vue组件中，有时我们需要定义一个复杂的数据类型，例如一个数组。使用接口可以帮助我们定义这种复杂类型。

下面是一个例子，演示如何使用接口定义一个Person数组类型的属性：

interface Person {
  name: string;
  age: number;
}

@Component
export default class MyComponent extends Vue {
  @Prop({ type: Array }) persons!: Person[];
}

在上面的例子中，我们使用接口Person来定义了一个包含name和age属性的类型。然后，我们通过@Prop修饰器将persons属性的类型指定为Person[]。

现在，我们可以在父组件中传递一个Person数组给子组件MyComponent：

<template>
  <my-component :persons="people"></my-component>
</template>

<script>
  import MyComponent from './MyComponent.vue';

  export default {
    data() {
      return {
        people: [
          { name: 'Alice', age: 20 },
          { name: 'Bob', age: 25 },
          { name: 'Charlie', age: 30 }
        ]
      }
    },
    components: {
      MyComponent
    }
  }
</script>

在上面的例子中，我们在父组件的data选项中定义了一个people数组，并将其传递给了子组件MyComponent的persons属性。