【Vue_实现共用/公共组件实现】vue.js公共组件

ゞ浴缸里的玫瑰 2024-03-16 22:04 62阅读 0赞

### 问题？我们需要让其每个页面的共有部分不再重复编写，怎么降低代码的冗余度？ ###

#### 例如：导航栏的共用组件怎么实现？ ####

#### 解决 ####

#### App.vue中写好公共组件 ####

#### 2 ####

![在这里插入图片描述][463b9706afab48ed8f807b1f7b6ca1c0.png]  
![在这里插入图片描述][a1d387c973fc427d9e1559f75a0d3d36.png]  
![在这里插入图片描述][32405498a62e4360b21f71adcd75b81e.png]  
\*\*![加粗样式][7dcb0374737a4c0facf9ce3c93b68455.png]  
\*\*

#### 11 ####

#### 122 ####

@@@  
@@\#\#\# 555

##### 5555666 #####

#### 实现 ####

<template>
      <div id="app">
        
        
        <el-container v-if="$route.meta.keepAlive">
    
          <el-header>
            <keep-alive>
              
              <header-nav></header-nav>
            </keep-alive>
          </el-header>
    
          <el-container>
    
            <el-main>
              
              <router-view></router-view>
            </el-main>
    
          </el-container>
    
          
          <el-container>
    
            <el-footer>
              <keep-alive>
                <foot></foot>
              </keep-alive>
    
            </el-footer>
    
          </el-container>
        </el-container>
    
        
        <router-view v-if="!$route.meta.keepAlive"></router-view>
    
      </div>
    
    </template>

#### js ####

<script>
      // 每个页面的导航栏
      import Nav from "./components/Nav.vue"
      import Footer from "./components/Footer.vue"
    
      export default {
        name: "app",
        components: {
          headerNav: Nav,
          Foot:Footer,
    
        },
        data() {
          return {
    
          }
        },
      }
    </script>
    
    <style>
    
    </style>

#### `main.js` ####

import Vue from 'vue'
    import App from './App.vue'
    import router from '

[463b9706afab48ed8f807b1f7b6ca1c0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/c0bdb9ad5ff64e0c833a7fa17a743269.png
[a1d387c973fc427d9e1559f75a0d3d36.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/8bb43c5330a84fcdb6bfb382000bed19.png
[32405498a62e4360b21f71adcd75b81e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/177649e515974472b92b35de0139035a.png
[7dcb0374737a4c0facf9ce3c93b68455.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/d29586bd87264d10b79f27571cf8bf42.png

发表评论取消回复

表情：

评论列表（有 0 条评论，62人围观）

还没有评论，来说两句吧...

相关阅读

相关【Vue_实现共用/公共组件实现】vue.js公共组件

问题？我们需要让其每个页面的共有部分不再重复编写，怎么降低代码的冗余度？例如：导航栏的共用组件怎么实现？解决 App.vue中写好公共组件 2

ゞ浴缸里的玫瑰/ 2024年03月16日 22:04/ 0 赞/ 63 阅读

相关在vue下封装echarts公共组件的总结

这几天公司里边有一个项目，叫做日控制台，该项目是在webview下的一个webapp，使用vue构建，项目中要求使用许多自定义的图表。考察了许多图表组件之后，发现echarts

偏执的太偏执、/ 2023年09月24日 22:25/ 0 赞/ 110 阅读

相关 vue中公共组件在部分组件中显示

场景导航条只在除登录注册以外以及特殊页面显示；公共组件在部分页面显示，部分页面不显示。方法: router-view结合$route.meta 代码: 项目

以你之姓@/ 2023年06月14日 10:53/ 0 赞/ 13 阅读

相关学习笔记——react公共组件与组件跳转

-------------------- > 在react中，除了页面级组件以外，我们有时还需要一些公共的组件，这些组件会被一个或多个页面级组件使用。例如导航组件和控制数量加

ゝ一纸荒年。/ 2022年11月22日 05:30/ 0 赞/ 246 阅读

相关微信小程序（13）：Component 实现公共组件

一、不需要进行组件间属性传递我们的小程序一般都有固定头部和固定底部，在每个.wxml文件中都写入头部和底部的代码就会很麻烦，这时候我们就可以用到 Component

蔚落/ 2022年10月29日 07:35/ 0 赞/ 614 阅读

相关 Excel导出公共组件设计

自己动手实现一个Excel导出公共组件！！！！文章主要分为以下几个部分来说明： 1、明确目标 2、技术预研 3、技术方案选型与方案设计 4、技术实施下面是

Bertha 。/ 2022年09月29日 14:48/ 0 赞/ 147 阅读

相关 vue开发自定义的全局公共组件

这里我主要介绍两种自定义全局公共组件的方法（1）第一种：首先在`components`中新建一个文件夹，我这里做的是全局加载动画组件所以命名的是`Loading`文

左手的ㄟ右手/ 2022年09月06日 13:28/ 0 赞/ 318 阅读

相关 nuxt引入组件和公共样式

1，引入组件在components目录创建组件，在页面中引入组件例如引入公共导航栏创建组件components/Nav.vue ![2018112614261

ゝ一世哀愁。/ 2022年04月21日 16:45/ 0 赞/ 275 阅读

相关公共组件开发流程

公共组件开发流程： 1. 创建SpringBoot的web项目，然后根据业务需求开发。只需开发业务逻辑层和数据访问层。 2. 开发完成并且通过测试用例以后，删除多

悠悠/ 2022年04月18日 04:23/ 0 赞/ 427 阅读

相关 vue项目笔记（25）-公共组件拆分

公共组件拆分（画廊组件） vue项目开发中，有些组件不仅仅是一个页面需要使用，这时候我们可以将其抽离出来，作为一个公共组件。公共组件常用的目录结构如下（其中Galle

ゝ一纸荒年。/ 2021年09月16日 03:30/ 0 赞/ 416 阅读