在vuejs中重用具有多个相同类型组件的文本

<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'TextComponent',
  props: {
    text: {
      type: String,
      required: true
    }
  }
}
</script>

<template>
  <div>
    <TextComponent v-for="item in textItems" :key="item.id">
      {{ item.text }}
    </TextComponent>
  </div>
</template>

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

export default {
  name: 'ParentComponent',
  components: {
    TextComponent
  },
  data() {
    return {
      textItems: [
        { id: 1, text: '文本1' },
        { id: 2, text: '文本2' },
        { id: 3, text: '文本3' }
      ]
    }
  }
}
</script>