vue3 自定义网站头部组件

Vue3 中自定义网站头部组件通常是一个独立、可复用的模块，它负责网站页面顶部的基本结构，比如导航栏、logo、搜索框等。创建一个 Vue3 头部组件的步骤如下：

1. **创建组件**：首先，在项目目录下创建一个名为 `Header.vue` 的文件，这是你的组件文件。

<!-- Header.vue -->
<template>
  <header class="site-header">
    <div class="container">
      <a href="/" class="logo">Logo</a>
      <!-- 导航菜单 -->
      <nav>
        <ul>
          <li v-for="(item, index) in navigation" :key="index">
            <router-link :to="item.path">{{ item.name }}</router-link>
          </li>
        </ul>
      </nav>
      <!-- 搜索框等其他元素 -->
      <search-box v-if="showSearchBox"></search-box>
    </div>
  </header>
</template>

<script setup>
import { ref } from 'vue';
import SearchBox from '@/components/SearchBox.vue'; // 如果有单独的搜索框组件

const navigation = [
  { name: '首页', path: '/' },
  { name: '关于我们', path: '/about' },
  {/* 更多链接... */}
];

const showSearchBox = ref(false); // 控制是否显示搜索框

// 在需要的地方使用该组件
</script>

<style scoped>
.site-header {
  /* 样式 */
}
</style>

2. **使用组件**：在父组件（如App.vue或需要头部的地方）中引入并使用这个头部组件，通过 props 或者 computed 变量传递数据给头部组件。

<!-- App.vue or other parent component -->
<template>
  <RouterView />
  <Header :navigation="globalNavigation" :showSearchBox="shouldShowSearchBox" />
</template>

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

export default {
  components: {
    Header,
  },
  data() {
    return {
      globalNavigation,
      shouldShowSearchBox: false, // 或者根据需求动态判断
    };
  },
};
</script>