父组件调用子组件，并把数据传给子组件，显示

这是父组件

<template>

  <div class="p-6 bg-gray-100 items-start justify-start">

    <Tag :tagsData="parentObject"></Tag>

  </div>

</template>

<script lang="ts" setup>

import { ref, reactive } from 'vue';

import Tag from '@/components/Tag/Tag.vue';

const parentObject = reactive([

  {

    label: '模型类型',

    tagIndex: 0,

    tags: [

      '全部',

      '文本生成',

      '推理模型',

      '音频理解',

      '视频理解',

      '图片处理',

      '图片理解',

      '图片生成',

      '向量模型',

      '视频生成',

      '全模态',

      '语音合成',

      '语音识别',

      '排序模型'

    ]

  },

  {

    label: '上下文长度',

    tagIndex: 0,

    tags: ['全部', '16K以下', '16K-64K', '64K以上']

  }

]);

</script>

 

 

这是子组件

<template>

  <div v-for="group in tagsData" :key="group.label" class="pb-5 space-y-4">

    <div class="flex items-center space-x-4 text-sm">

      <span class="text-gray-500 shrink-0 w-20">{{ group.label }}</span>

      <div class="flex items-center flex-wrap gap-2">

        <button

          v-for="(tag, index) in group.tags"

          :key="tag"

          @click="toggleTagSelection(group, index)"

          :class="[

            'px-3 py-1.5 rounded-md transition-colors duration-200',

            group.tagIndex === index

              ? 'bg-violet-100 text-violet-600 font-semibold'

              : 'bg-gray-100 hover:bg-gray-200 text-gray-800'

          ]"

        >

          {{ tag }}

        </button>

      </div>

    </div>

  </div>

</template>

<script setup>

import { reactive } from 'vue';

defineOptions({ name: 'Tag' });

const toggleTagSelection = (group, index) => {

  group.tagIndex = index;

  console.log(`在 "${group.label}" 中选中了: ${group.tags[group.tagIndex]}`);

};

const props = defineProps({

  tagsData: {

    type: Array,

    required: true

  }

});

</script>