注册公共组件,在每个需要的页面直接输入文件名(<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. ps去除图片中间部分并拼合

    今天分享一个用ps去除图片中间部分后,把剩下的部分拼合的技术. 需求 下面这张图,需要去掉第三列(顺丰包邮价) ps处理过程 1.导入图片到ps软件 快捷键方式:Ctrl + O: 手动打开方式:点击 ...

  2. NPM包管理器

    一.简介 1.NPM全称Node Package Manager,是Node.js包管理工具,是全球最大的模块生态系统,里面所有的模块都是开源免费的:也是Node.js的包管理工具,相当于Maven. ...

  3. KingbaseES V8R6 空闲事务会话超时自动终止机制

    背景 如果会话在事务中停留的时间过长,则允许自动终止空闲会话.可以由配置参数idle_in_transaction_session_timeout 事务处于空闲状态的时长,它有助于防止被遗忘的交易事务 ...

  4. wordpress自建博客站,在页脚添加网站总运行时间

    wordpress自建博客站,在页脚添加网站总运行时间 笔者使用的主题是 GeneratePress 版本:3.1.3 <span id="momk" style=" ...

  5. GraphPro

    GraphPro: Graph Pre-training and Prompt Learning for Recommendation 北京B区 / 032机 北京B区 / 224机 数据集介绍 本文 ...

  6. #平衡树#洛谷 1110 [ZJOI2007]报表统计

    题目 分析 最小值只需要开两棵平衡树,一棵维护所有元素,一棵维护相邻最小值, 对于全局最小值,对于每次插入查找前驱后继更新最小值即可, 相邻最小值,对于每个原数列的数维护它的开头和结尾是什么数, 然后 ...

  7. Yolov5代码详解——detect.py

    首先执行扩展包的导入: import argparse import os import platform import sys from pathlib import Path ​ import t ...

  8. 【FAQ】HMS Core推送服务推送角标的开发及常见问题解答

    目录 1.发送消息并显示桌面数字角标. 2.如何清除数字角标? 3.如何设置圆点角标? 4.应用桌面图标角标开关无法开启或未显示开关. 5.推送消息设置了角标字段但未显示角标? 6.未设置角标参数,但 ...

  9. ssm 创建bean的三种方式和spring依赖注入的三种方式

    <!--创建bean的第一种方式:使用默认无参构造函数 在默认情况下: 它会根据默认无参构造函数来创建类对象.如果 bean 中没有默认无参构造函数,将会创建失败--> <bean ...

  10. 如何增强Java Excel API 的导入和导出性能

    前言 GrapeCity Documents for Excel (以下简称GcExcel)是葡萄城公司的一款服务端表格组件,它提供了一组全面的 API 以编程方式生成 Excel (XLSX) 电子 ...