vue3想要提高代码的复用性，将某部分代码(如顶部导航栏)重复使用在多个页面中，应该采用什么方法

在 Vue3 中，为了提高代码复用性和减少冗余，你可以采用组件化开发的方式。对于像顶部导航栏这样的共享部分，可以创建一个名为 `TopNavbar` 的独立组件。以下是步骤：

1. **定义组件**:
- 在 `src/components` 目录下创建一个新的文件夹，比如 `SharedComponents`，然后在其中创建一个名为 `TopNavbar.vue` 的文件。
- 在该文件中，编写顶部导航栏的 HTML、CSS 和 JavaScript 逻辑。

<template>
  <nav class="top-navbar">
    <!-- 导航链接的内容 -->
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </nav>
</template>

<script>
export default {
  name: 'TopNavbar',
  props: { // 接收外部传递的数据
    items: {
      type: Array,
      required: true,
    },
  },
};
</script>

2. **在父组件中引入并使用组件**:
- 在需要使用顶部导航栏的多个页面的组件中，导入并作为 `<TopNavbar>` 标签插入到模板中，并传入相应的数据。

<template>
  <div>
    <TopNavbar :items="navbarItems" />
    <!-- 其他内容 -->
  </div>
</template>

<script>
import TopNavbar from '@/components/SharedComponents/TopNavbar.vue';

export default {
  components: {
    TopNavbar,
  },
  data() {
    return {
      navbarItems: [
        { id: 1, name: 'Home' },
        { id: 2, name: 'About' },
        // 更多选项...
      ],
    };
  },
};
</script>

这样，当你需要改变顶部导航栏的样式或功能时，只需要在 `TopNavbar.vue` 文件中进行修改，所有依赖它的页面都会自动受益于更新，提高了代码的复用性和维护性。