vue-公共组件的注册
注册公共组件,在每个需要的页面直接输入文件名(<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-公共组件的注册的更多相关文章
- 如何抽象一个 Vue 公共组件
之前一直想写一篇关于抽象 Vue 组件的随笔,无奈一直没想到好的例子.恰巧最近为公司项目做了一个数字键盘的组件,于是就以这个为例聊聊如何抽象 Vue 的组件. 先上 Demo 与 源码.(demo最好 ...
- .vue公共组件裁减导航
场景: 有一个公共头部和底部,vue搭建的框架,在app.vue里写的公共方法,首页是个登录页面,不需要公共部分,在这基础上进行公共部分的显示隐藏. 即注册页.登录页.404页面都不要导航 代码: ( ...
- vue 全局组件的注册
第一步 在main.js里面 引入需要注册的组件例如: //引入组件 import header from './components/header.vue' import footer from ...
- Vue(三十)公共组件
以 分页 组件为例:(根据自己具体业务编写) 1.pagination.vue <template> <!-- 分页 --> <div class="table ...
- Vue(小案例_vue+axios仿手机app)_公共组件(路由组件传参)
一.前言 1.公共轮播图的实现 2.组件传参,公共组件的实现 二.主要内容 1.公共轮播图的实现 (1)分析:当渲染不同的轮 ...
- vue学习—组件的定义注册
组件的定义注册 效果: 方法一: <div id="box"> <v-header></v-header> <hr /> <b ...
- vue之组件注册
一.组件名 写组件之前你要明确你的目的,想要做一个什么样的组件,我们在注册一个组件的时候,需要给组件一个名字,对于命名,尽可能明确,使用 kebab-case (短横线分隔命名) 或 PascalCa ...
- Vue全局组件注册
通过Vue.component(‘组件名’, {配置对象})注册全局组件 在main.js中注册全局组件 test import Vue from 'vue' import App from './A ...
- vue中全局组件与局部组件的注册,以及动态绑定props值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue.js组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
随机推荐
- KingbaseES V8R6备份恢复案例之---备份crond计划任务的调整
案例说明: 在KingbaseES V8R6数据库通常备份建立的crond任务,默认由root用户建立,写入到/etc/cron.d/KINGBASECRON文件中,在有的生产环境限制了普通用户使用r ...
- scala入门输出helloworld
1 object HelloScala{ 2 def main(args : Array[String]){ 3 println("hello scala") 4 } 5 } He ...
- 03 jQuery属性控制
03 jQuery属性控制 属性相关的控制主要有以下几个功能 val() => 处理value属性 text() => 处理innerText html() => 处理innerHT ...
- 3 CSS组合选择器
3 组合选择器 页面元素比较复杂,存在多个嵌套.为了更加灵活选择页面中的元素,CSS中还提供了组合选择器.组合选择器就是将多个基本选择器通过一定的规则连接起来组成一个复杂选择器. 后代子代选择器 &l ...
- #错排,高精度#洛谷 3182 [HAOI2016]放棋子
题目 分析 这题目太迷惑人了: 每行有一个障碍,数据保证任意两个障碍不在同一行,任意两个障碍不在同一列 \(n\) 个棋子也满足每行只有一枚棋子,每列只有一枚棋子 仔细想想会发现求的是错排方案,那也就 ...
- #概率,dp#JZOJ 4212 我想大声告诉你
题目 小\(x\)和他的\(n-1\)个朋友,进行\(k\)轮游戏,每轮等概率选出一个人作为获胜者并退出游戏, 其余在游戏中的人有\(p\)的概率被迫退出游戏,问对于任意的轮数\(k\),使小\(x\ ...
- Jetty的工作参数
Jetty加载参数的优先级: 命令行. $JETTY_BASE下的文件. 使用--include-jetty-dir指定的目录下的文件. $JETTY_HOME下的文件. 查看当前的配置参数,执行如下 ...
- HDD成都站·暨HMS Core 6.0产品交流会报名开启
HUAWEI Developer Day(以下简称HDD)如期而至,将在9月10日和盟友们相聚成都,开启一场属于开发者的交流盛会.本次沙龙活动由上.下半场组成,诚挚地邀请各位开发者参加. 精彩预告 0 ...
- DS-Net:可落地的动态网络,实际加速1.62倍,快改造起来 | CVPR 2021 Oral
论文提出能够适配硬件加速的动态网络DS-Net,通过提出的double-headed动态门控来实现动态路由.基于论文提出的高性能网络设计和IEB.SGS训练策略,仅用1/2-1/4的计算量就能达到静态 ...
- 编译安装cmake,linux编译安装cmake
cmake官网:https://cmake.org/ cmake官网下载地址:https://cmake.org/download/ 现在Linux版本最新版是:cmake-3.28.0-rc5.ta ...