vue3卡片分组显示

在Vue3中，可以使用组件来实现卡片分组显示。首先，需要创建一个Card组件，用于显示卡片的内容。然后，创建一个Group组件，用于将多个Card组件分组显示。

下面是一个简单的示例代码：

<template>
  <div>
    <group title="Group 1">
      <card title="Card 1">
        <p>Card 1 content</p>
      </card>
      <card title="Card 2">
        <p>Card 2 content</p>
      </card>
    </group>
    <group title="Group 2">
      <card title="Card 3">
        <p>Card 3 content</p>
      </card>
      <card title="Card 4">
        <p>Card 4 content</p>
      </card>
    </group>
  </div>
</template>

<script>
  const Card = {
    props: ['title'],
    template: `
      <div class="card">
        <h3>{{ title }}</h3>
        <slot></slot>
      </div>
    `
  }

  const Group = {
    props: ['title'],
    template: `
      <div class="group">
        <h2>{{ title }}</h2>
        <slot></slot>
      </div>
    `
  }

  export default {
    components: {
      Card,
      Group
    }
  }
</script>

<style>
  .card {
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 10px;
  }

  .group {
    margin-bottom: 20px;
  }
</style>

在上面的代码中，我们定义了两个组件：Card和Group。Card组件用于显示卡片的内容，Group组件用于将多个Card组件分组显示。在模板中，我们使用了两个Group组件，每个Group组件包含两个Card组件。每个Card组件都有一个title属性，用于显示卡片的标题。在Group组件中，我们使用了Vue3的新特性——slot，用于将Card组件插入到Group组件中。