自定义一个全局Loading组件,并使用:
总结目录:
|-components
  |-loading
    |-index.js 导出组件,并且install
    |-loading.vue 定义Loading组件

1.components/loading/index.js

import LoadingComponent from "./Loading.vue"
const Loading = {
install: function(Vue){
Vue.component("Loading", LoadingComponent)
}
}
export default Loading

  

2.components/loading/Loading.vue

<template>
<div class="loading-box">
loading...
</div>
</template>

  

3.main.js

import Vue from 'vue'
import App from './App'
import Loading from "./components/loading/index.js" Vue.use(Loading) new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})

  

4.App.vue

<template>
<div id="app">
<Loading></Loading>
</div>
</template>

  

自定义vue全局组件use使用的更多相关文章

  1. 自定义vue全局组件use使用、vuex的使用

    自定义vue全局组件use使用(解释vue.use()的原理)我们在前面学习到是用别人的组件:Vue.use(VueRouter).Vue.use(Mint)等等.其实使用的这些都是全剧组件,这里我们 ...

  2. 自定义vue全局组件use使用(解释vue.use()的原理)

    我们在前面学习到是用别人的组件:Vue.use(VueRouter).Vue.use(Mint)等等.其实使用的这些都是全剧组件,这里我们就来讲解一下怎么样定义一个全局组件,并解释vue.use()的 ...

  3. 详解vue全局组件与局部组件使用方法

    这篇文章主要为大家详细介绍了vue全局组件与局部组件的使用方法,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. vue全局/局部注册,以及一些混淆的组件main.js ...

  4. Vue全局组件注册

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

  5. 自定义Vue&Element组件,实现用户选择和显示

    在我们很多前端业务开发中,往往为了方便,都需要自定义一些用户组件,一个是减少单一页面的代码,提高维护效率:二个也是方便重用.本篇随笔介绍在任务管理操作中,使用自定义Vue&Element组件, ...

  6. vue插件 使用use注册Vue全局组件和全局指令

    插件一般会注册到全局使用 官方编辑插件介绍:https://vuefe.cn/v2/guide/plugins.html 全局组件: .首先建一个自定义组件的文件夹,比如叫loading,里面有一个i ...

  7. vue全局组件-父子组件传值

    全局组件注册方式:Vue.component(组件名,{方法}) demo: 子组件:upload.vue <template> <div > <div class=&q ...

  8. vue 全局组件【原】

    1.目录 2.内容 -Loading.vue <template> <div class="loading"> loading... </div> ...

  9. vue 全局组件的注册

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

随机推荐

  1. 【玩转Golang】beego下实现martini中的透明式静态文件服务(static folder)效果。

    出于效率等原因,最近将web框架由martini切换为了beego,其他地方都很平顺,只是两个框架的handler签名不一致,需要修改,所以耗时较长,这是预计到的.但是有一个地方没有预计到,也耗费了较 ...

  2. 【WP8】图片压缩处理

    最近在做图片上传功能,类似于微信朋友圈的功能,现在的手机像素都比较高,手机上的图片一般都比较大(几M),对于大图,在上传之前,我们需要对图片进行压缩(分辨率和质量),再上传到服务器,以减少网路流量传输 ...

  3. UNIX环境编程学习笔记(10)——文件I/O之硬链接和符号链接

    lienhua342014-09-15 1 文件系统数据结构 UNIX 文件系统通过 i 节点来存储文件的信息.如图 1 所示为一个磁盘柱面上的 i 节点和数据块示意图.其中 i 节点是一个固定长度的 ...

  4. 关系型数据库 和 非关系型数据对比 以及 MySQL与Oracle对比

    一.关系型数据库 关系型数据库,是指采用了关系模型来组织数据的数据库.    关系模型1970年提出的,关系模型的概念得到了充分的发展并逐渐成为主流数据库结构的主流模型.    简单来说,关系模型指的 ...

  5. gcc 高版本兼容低版本 技巧 :指定 -specs={自定义specs文件} 参数。可以搞定oracle安装问题

    如: #!/bin/sh /usr/bin/gcc-7 -specs=/usr/lib/gcc/x86_64-linux-gnu/jin.spec $* 该技巧很实用.这么久才发现,唉,不是专业搞某个 ...

  6. Oracle:oracle 12.1.0.2 升级到12.2.0.1 后,自动任务报错:ORA-20001: Statistics Advisor: Invalid task name for the current user

    具体错误如下:关键字:ORA-12012.ORA-20001 ORA-12012: error on auto execute of job "SYS"."ORA$AT_ ...

  7. Windows 7 完美安装 Visual C++ 6.0

    http://wenku.baidu.com/link?url=UiwoH2l4H_IWK6y8JkVNg4slp8gkM_9qudihP0XD4MdMCwm-j1-vINWEjQE1aBCeP121 ...

  8. 怎么用ABBYY重组PDF文档

    ABBYY PDF Transformer+是一款可创建.编辑以及将PDF文件转换为其他可编辑格式的通用工具,除此之外,还可以使用ABBYY PDF Transformer+重新组织PDF文档,如在文 ...

  9. VMware12多台虚拟机上网设置

    1.根据镜像安装好linux系统, 2.  把网络适配器移除后,重新添加试试 3. 当按照上述配置后还是无法上网,把VMnet0 桥接模式的自动 ,这里重新点击下自动设置(其实没有做到自动配置) 4. ...

  10. linux环境中,查看域名的DNS信息?

    需求说明: 今天在linux主机上,要查询一个域名是在哪个DNS上进行解析的,这个域名下面还有哪些的地址 操作过程: 1.linux环境中通过nslookup命令来进行查看 [deployer@CBS ...