在 Vue 2 中，Element UI 提供了 el-breadcrumb 面包屑组件，而在 Vue 3 中，Element UI 的官方版本并没有直接更新以支持 Vue 3，但有一个类似的库叫做 Element Plus，它是为 Vue 3 设计的。
Vue 2 + Element UI
在 Vue 2 的 Element UI 中，el-breadcrumb 组件用于显示当前页面的路径，以面包屑的形式。
属性（Props）
separator：分隔符，默认为斜杠/。separator-class：分隔符的类名。
事件（Events）
el-breadcrumb 组件在 Element UI 中并没有定义特定的事件。
示例
<template>
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/about' }">关于我们</el-breadcrumb-item>
<el-breadcrumb-item>联系我们</el-breadcrumb-item>
</el-breadcrumb>
</template>
<script>
export default {
// ...
};
</script>
Vue 3 + Element Plus
在 Vue 3 的 Element Plus 中，el-breadcrumb 组件的用法与 Vue 2 的 Element UI 类似，但可能会有一些 API 变动和新增功能。
属性（Props）
separator：分隔符，默认为斜杠/。separator-class：分隔符的类名。separator-icon：自定义分隔符图标，可以使用 Element Plus 的图标组件或其他自定义图标。
事件（Events）
与 Vue 2 的 Element UI 类似，el-breadcrumb 组件在 Element Plus 中也没有定义特定的事件。
示例
<template>
<el-breadcrumb separator="/">
<el-breadcrumb-item to="/">首页</el-breadcrumb-item>
<el-breadcrumb-item to="/about">关于我们</el-breadcrumb-item>
<el-breadcrumb-item>联系我们</el-breadcrumb-item>
</el-breadcrumb>
</template>
<script setup>
// 在 Vue 3 中使用 script setup 语法
// ...
</script>
注意：由于 Element Plus 仍在不断发展中，具体的 API 和使用方法可能会有所不同。务必参考 Element Plus 的官方文档以获取最准确的信息和示例代码。
在 Vue 3 中，你可能还需要安装并引入 Element Plus 及其图标库，例如 @element-plus/icons-vue，并在你的项目中配置它们。
此外，Vue 3 引入了 Composition API，这允许你以更函数式的方式组织你的组件逻辑，但上面的示例为了简洁性仍然使用了 <script setup> 语法，这是 Vue 3 单文件组件的另一种写法。