vue props 数组

在 Vue 中使用 props 数组，可以让我们向子组件传递多个属性。

例如，在父组件中声明一个 props 数组：

<template>
  <child-component :prop1="value1" :prop2="value2" :prop3="value3" />
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      value1: 'Hello',
      value2: 'world',
      value3: '!'
    };
  }
};
</script>

在子组件中，我们可以通过 $props 访问所有的 props：

<template>
  <div>
    <p>{{ $props.prop1 }} {{ $props.prop2 }}{{ $props.prop3 }}</p>
  </div>
</template>

<script>
export default {
  props: {
    prop1: {
      type: String,
      required: true
    },
    prop2: {
      type: String,
      required: true
    },
    prop3: {
      type: String,
      required: true
    }
  }
};
</script>

在上面的例子中，我们在父组件中通过 props 数组向子组件传递了三个属性，即 `prop1`、`prop2` 和 `prop3`。在子组件中，我们通过 `$props` 访问了这三个属性，并在模板中进行了渲染。同时，在子组件中，我们也需要在 `props` 属性中声明这三个属性，并定义它们的类型和是否必需。