首页 > 其他分享 >vue3中如何实现通用头部?

vue3中如何实现通用头部?

时间:2024-10-09 13:13:26浏览次数:11  
标签:Vue 通用 state 头部 vue3 组件 Vuex HeaderComponent

在 Vue 中实现通用头部可以通过以下几种方式:

一、使用 Vue 组件

  1. 创建头部组件
    • 首先,创建一个名为HeaderComponent.vue的 Vue 组件文件。
    • 在这个组件中,可以使用 Vue 的模板语法来设计头部的结构,例如包含导航栏、品牌标志、搜索框等元素。
   <template>
     <header>
       <div class="logo">品牌标志</div>
       <nav>
         <ul>
           <li>首页</li>
           <li>产品</li>
           <li>关于我们</li>
         </ul>
       </nav>
       <div class="search">
         <input type="text" placeholder="搜索...">
         <button>搜索</button>
       </div>
     </header>
   </template>
  • <script>标签中,可以添加组件的逻辑部分,例如处理导航栏的点击事件等。
   export default {
     name: 'HeaderComponent',
     methods: {
       handleNavClick(item) {
         // 处理导航栏点击事件的逻辑
         console.log(`点击了 ${item}`);
       }
     }
   };
  1. 在其他页面中引入头部组件
    • 在需要使用通用头部的页面组件中,通过import语句引入头部组件。
   import HeaderComponent from './HeaderComponent.vue';
  • 在页面组件的components选项中注册头部组件。
   export default {
     name: 'PageComponent',
     components: {
       HeaderComponent
     }
   };
  • 在页面组件的模板中使用头部组件。
   <template>
     <div>
       <HeaderComponent />
       <!-- 页面的其他内容 -->
     </div>
   </template>

二、使用 Vuex 管理全局状态

如果头部需要显示一些全局状态,例如用户登录状态、购物车数量等,可以使用 Vuex 来管理这些状态。

  1. 安装和配置 Vuex
    • 安装 Vuex:npm install vuex
    • 创建一个store.js文件来配置 Vuex 存储。
   import Vue from 'vue';
   import Vuex from 'vuex';

   Vue.use(Vuex);

   const store = new Vuex.Store({
     state: {
       isLoggedIn: false,
       cartCount: 0
     },
     mutations: {
       setLoggedIn(state, value) {
         state.isLoggedIn = value;
       },
       incrementCartCount(state) {
         state.cartCount++;
       }
     }
   });

   export default store;
  1. 在头部组件中获取全局状态
    • 在头部组件中,可以通过this.$store.state来访问全局状态。
   <template>
     <header>
       <div class="logo">品牌标志</div>
       <nav>
         <ul>
           <li v-if="!$store.state.isLoggedIn">登录</li>
           <li v-if="$store.state.isLoggedIn">个人中心</li>
           <li>购物车({{$store.state.cartCount}})</li>
         </ul>
       </nav>
     </header>
   </template>

三、动态配置头部

有时候,头部的内容可能需要根据不同的页面或条件进行动态配置。可以通过 props 或 Vuex 的状态来实现动态配置。

  1. 使用 props
    • 在头部组件中定义 props,接收来自父组件的配置信息。
   export default {
     name: 'HeaderComponent',
     props: {
       showSearch: {
         type: Boolean,
         default: true
       }
     }
   };
  • 在使用头部组件的页面中,可以通过 props 传递不同的值来控制头部的显示内容。
   <template>
     <div>
       <HeaderComponent :show-search="false" />
       <!-- 页面的其他内容 -->
     </div>
   </template>
  1. 使用 Vuex 状态
    • 在 Vuex 的存储中添加一个状态,用于控制头部的显示内容。
   const store = new Vuex.Store({
     state: {
       showSearchOnHeader: true
     },
     mutations: {
       toggleSearchOnHeader(state) {
         state.showSearchOnHeader =!state.showSearchOnHeader;
       }
     }
   });
  • 在头部组件中,根据 Vuex 的状态来决定是否显示搜索框。
   <template>
     <header>
       <div class="logo">品牌标志</div>
       <nav>
         <ul>
           <li>首页</li>
           <li>产品</li>
           <li>关于我们</li>
         </ul>
       </nav>
       <div v-if="$store.state.showSearchOnHeader" class="search">
         <input type="text" placeholder="搜索...">
         <button>搜索</button>
       </div>
     </header>
   </template>

通过以上方法,可以在 Vue 项目中实现一个通用的头部组件,并且可以根据不同的需求进行动态配置和管理全局状态。

标签:Vue,通用,state,头部,vue3,组件,Vuex,HeaderComponent
From: https://www.cnblogs.com/xiins/p/18454000

相关文章

  • [智能网联汽车/数据标准/法规政策] 标准解读:GB/T 44464-2024《汽车数据通用要求》
    0引言随着智能技术的不断发展,智能网联汽车作为新时代移动智能终端的代表,正引领着汽车产业向智能化、网联化深刻转型与升级。智能网联汽车与云端服务器、移动端、车端等设备存在大量的数据交互,包括车辆运行数据、用户个人信息等。缺乏对这些数据实施的有效监管与控制,将潜藏重大......
  • 基于Echarts+HTML5可视化数据大屏展示-大数据可视化通用版
    博主主页:猫头鹰源码博主简介:Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万+、专注Java技术领域和毕业设计项目实战,欢迎高校老师\讲师\同行交流合作​主要内容:毕业设计(Javaweb项目|小程序|Python|HTML|数据可视化|SSM|SpringBoot|Vue|Jsp|PHP......
  • vue3 pinia 存数据
    pinia是vue2中的vuex,状态管理,可以实现数据共享1、先安装npminstallpinia 2、在main.ts中进行创建和载入3、在src下新建store文件夹定义存的文件  4、在组件中使用 此时控制台会有具体的值。   ......
  • Vue3 计算属性
    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一、computed是什么?二、示例前言计算属性用于根据其他数据的变化动态计算衍生出来的属性值,而且具有缓存机制,只有相关依赖发生变化时才会重新计算。一、computed是什么?计算属性关键词:......
  • vue3如何将 app 全局变量对象变为响应式并监听到某个属性的改变
    需求:通过 getData()方法获取到数据对象,想要在屏幕方向改变的时候,给获取到的对象设置  orientation,能实时修改方案:使用reactive包裹,template直接使用全局变量下的属性,watch直接监听对应属性代码如下:main.jsconstconfig=reactive(getData())//设置屏幕方......
  • Vue3 hooks----实现组合式API
    hooks实现将一个功能的所有数据、方法、生命周期函数放到一块去使用。我们在src底下定义个Hooks文件夹,将我们要进行模块化的功能设置为use功能名。例如:我要将点我加一这个功能进行hooks,则使用useSum.ts这个文件定义功能逻辑。在这个ts里面需要export default 函数这种写法,......
  • Vue3 watch方法----监视对象
    使用watch时,如果想监视对象的内部属性值。需要使用watch的第三个参数的配置对象,手动开启深度监视。//使用watch时如果想监视对象内部的属性值,需要使用watch的第三个参数,手动开启深度监视watch(person,(newValue,oldValue)=>{console.log('person发生了变化',newValue,o......
  • vue3 watch方法---监视基本类型数据
    watch 监听定义的数据发生改变的时候执行什么函数watch方法有两个参数watch(sum,箭头函数)这个箭头函数里面有两个参数(newValue,oldValue)=>{},如下代码<template><!--watch;监视数据变化vue3可以监视一下四种数据类型:ref定义的数据......
  • Vue3的项目搭建
    有两种方式可以搭建:一:使用vue-cli中的webpack创建 第二:推荐使用vite来创建项目vite是新一代前端构建工具,新的前端构建工具,比webpack要快一些。npmcreatevue@latest创建完项目后,我们可以看到项目最外层有index.htmlVite项目中,index.html是项目的入口文件,在项目最外层。......
  • 掌握防抖与节流:如何用JavaScript封装通用函数
    在日常前端开发中,我们经常会遇到一些频繁触发的事件,如窗口调整大小、滚动条滚动、输入框输入等。为了提高页面性能和用户体验,我们需要对这些事件进行优化。本文将介绍如何使用JavaScript封装通用的防抖和节流函数。一、什么是防抖(Debounce)和节流(Throttle)?防抖(Debounce):当持续......