用Vue3+TS如何封装一个面包屑组件

面包屑组件通常用于在网站或应用程序中显示当前页面的导航路径。在Vue3中，您可以使用TypeScript来封装一个面包屑组件。

以下是一个简单的面包屑组件的示例：

// BreadCrumb.ts

import { defineComponent, PropType } from 'vue';

export default defineComponent({
  name: 'BreadCrumb',
  props: {
    items: {
      type: Array as PropType<{ text: string; path: string }[]>,
      required: true,
    },
  },
  setup(props) {
    return {
      // 空函数，如果需要可以扩展
    };
  },
  template: `
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item" v-for="(item, index) in props.items" :key="index">
          <a :href="item.path">{{ item.text }}</a>
        </li>
      </ol>
    </nav>
  `,
});

在上面的示例中，我们使用 `defineComponent` 函数来定义一个Vue组件，并使用 `props` 属性来定义组件的输入。`items` prop 是一个数组，其中包含面包屑的每个部分的文本和路径。

在 `setup` 函数中，我们可以添加其他逻辑，如方法和计算属性。

最后，在组件的模板中，我们使用 `v-for` 指令来循环遍历 `items` 数组，并使用 `:href` 绑定每个面包屑部分的路径。