注册公共组件,在每个需要的页面直接输入文件名(<g-table/>)即可引用该组件

步骤:

1.新建components/global文件夹,以及components/global/g-table.vue文件。

2.新建untils/globalComponents-register.js,内容:

import Vue from 'vue';
// import 所有组件
const requireComponent = require.context('@/components/global', true, /\.vue$/);
// 遍历所有组件地址地址
requireComponent.keys().forEach(fileName => {
// 文件名作为组件名
let name = fileName.split('/')[1].split('.')[0];
const componetConfig = requireComponent(fileName);
// 注册全局组件
Vue.component(name, componetConfig.default || componetConfig)
})

3.在main.js中引入这个js(引入的js文件比较多时可以在main.js只引入untils/index.js,在index.js中引入其他各js文件)

4.页面使用:<g-table/> 无需引入

vue-公共组件的注册的更多相关文章

  1. 如何抽象一个 Vue 公共组件

    之前一直想写一篇关于抽象 Vue 组件的随笔,无奈一直没想到好的例子.恰巧最近为公司项目做了一个数字键盘的组件,于是就以这个为例聊聊如何抽象 Vue 的组件. 先上 Demo 与 源码.(demo最好 ...

  2. .vue公共组件裁减导航

    场景: 有一个公共头部和底部,vue搭建的框架,在app.vue里写的公共方法,首页是个登录页面,不需要公共部分,在这基础上进行公共部分的显示隐藏. 即注册页.登录页.404页面都不要导航 代码: ( ...

  3. vue 全局组件的注册

    第一步 在main.js里面 引入需要注册的组件例如: //引入组件 import header from  './components/header.vue' import footer from ...

  4. Vue(三十)公共组件

    以 分页 组件为例:(根据自己具体业务编写) 1.pagination.vue <template> <!-- 分页 --> <div class="table ...

  5. Vue(小案例_vue+axios仿手机app)_公共组件(路由组件传参)

    一.前言                    1.公共轮播图的实现                    2.组件传参,公共组件的实现 二.主要内容 1.公共轮播图的实现 (1)分析:当渲染不同的轮 ...

  6. vue学习—组件的定义注册

    组件的定义注册 效果: 方法一: <div id="box"> <v-header></v-header> <hr /> <b ...

  7. vue之组件注册

    一.组件名 写组件之前你要明确你的目的,想要做一个什么样的组件,我们在注册一个组件的时候,需要给组件一个名字,对于命名,尽可能明确,使用 kebab-case (短横线分隔命名) 或 PascalCa ...

  8. Vue全局组件注册

    通过Vue.component(‘组件名’, {配置对象})注册全局组件 在main.js中注册全局组件 test import Vue from 'vue' import App from './A ...

  9. vue中全局组件与局部组件的注册,以及动态绑定props值

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

随机推荐

  1. 靶场搭建----phpstudy2018安装及注意问题

    安装 官网下载: https://www.xp.cn/download.html 新人推荐2018 版本phpstudy 介绍 系统服务------开机自启 非服务模式------开机不自启 搭建好环 ...

  2. PostgreSQL与Java JDBC数据类型对照 源码

    文件:postgresql-42.2.12.jar 类名:org.postgresql.jdbc.TypeInfoCache // basic pg types info: // 0 - type n ...

  3. AtCoder Beginner Contest 347

    AT link Problem A and B 略. Problem C 按照模 \(a + b\) 分类,记录最大值和最小值,如果差值小于等于假期时间即可,否则还需要判断按照 \(d_i = D_i ...

  4. SSL加密以及http和https的区别是什么

    SSL加密是建立在非对称加密算法的基础上的.非对称加密算法会产生一对长字符串,称为密钥对(公钥.私钥).数据使用公钥进行加密后, 唯一只能使用私钥才能解开.安装了服务器证书的网站,其实是把私钥保存在服 ...

  5. #点分治,Kruskal#AT3611 Tree MST

    题目 给定一棵 \(n\) 个节点的树,现有有一张完全图, 两点 \(x,y\) 之间的边长为 \(w_x+w_y+dis_{x,y}\), 其中 \(dis\) 表示树上两点的距离. 求完全图的最小 ...

  6. ABA问题的本质及其解决办法

    目录 简介 第一类问题 第二类问题 第一类问题的解决 第二类问题的解决 总结 简介 CAS的全称是compare and swap,它是java同步类的基础,java.util.concurrent中 ...

  7. Seaborn风格设置

    官方网站:seaborn: statistical data visualization - seaborn 0.11.2 documentation (pydata.org) Seaborn是基于m ...

  8. 攻防世界 debug

    题目 分析过程 丢到PE里面 一开始,我看到下面的脱壳提示,以为是我没见过的壳,下载了相关工具脱壳--发现脱了后又出现没见过的脱壳提示,根据提示脱壳弄出来的东西怪怪的 卡题,查了资料 学到一个新知识点 ...

  9. 深入理解MD5算法:原理、应用与安全

    第一章:引言 导言 在当今数字化时代,数据安全和完整性变得至关重要.消息摘要算法是一种用于验证数据完整性和安全性的重要工具.在众多消息摘要算法中,MD5(Message Digest Algorith ...

  10. HarmonyOS—UI 开发性能提升的推荐方法

    注:本文转载自 HarmonyOS 官网文档 开发者若使用低性能的代码实现功能场景可能不会影响应用的正常运行,但却会对应用的性能造成负面影响.本章节列举出了一些可提升性能的场景供开发者参考,以避免应用 ...