vue3使用defineProps 传递数组 使用中文并编写代码

Vue3中可以使用defineProps来定义组件的props，可以传递数组作为参数。

以下是一个使用defineProps传递数组的示例代码：

<template>
  <div>
    <h1>{{ title }}</h1>
    <ul>
      <li v-for="item in items" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
import { defineProps } from 'vue'

export default {
  props: defineProps({
    title: {
      type: String,
      required: true
    },
    items: {
      type: Array,
      required: true
    }
  })
}
</script>

在上面的代码中，我们使用defineProps来定义组件的props，通过传递一个包含title和items的对象来定义props的类型和是否必填。

然后在template中可以直接使用这些props的值来渲染组件的内容。在这个例子中，我们展示了一个标题和传递的items数组。

使用这个组件的示例代码：

<template>
  <div>
    <my-component title="标题" :items="['第一项', '第二项', '第三项']" />
  </div>
</template>

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

export default {
  components: {
    MyComponent
  }
}
</script>

在这个示例代码中，我们导入了之前定义的MyComponent组件，并在template中使用它，并传递了一个包含title和items属性的对象作为参数。在这个例子中，我们传递了一个包含三个字符串的items数组。

这样，在页面上渲染出来的MyComponent组件就会展示一个包含标题和items数组中所有元素的列表。