自定义一个全局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. u3d加载外部视屏

    u3d的外部加载视屏,采用www方式,可以使用gui播放,也可以绑定到gameobject上作为动态材质使用,不过目前只支持.ogg格式,需要转... using UnityEngine;using ...

  2. 【翻译自mos文章】在RHEL7/OL7上安装Oracle 12.1.0.2的server端或者client时,报须要&quot;compat-libstdc++&quot;包

    在RHEL7/OL7上安装Oracle 12.1.0.2的server端或者client时,报须要"compat-libstdc++"包 来源于: Installation of ...

  3. sparkSQL实际应用

    提交代码包 /usr/local/spark/bin$ spark-submit --class "getkv" /data/chun/sparktes.jar 1.查询KV im ...

  4. UNIX环境编程学习笔记(4)——文件I/O之dup复制文件描述符

    lienhua342014-08-23 UNIX 提供了两个函数 dup 和 dup2 用于复制一个现存的文件描述符. #include <unistd.h> int dup(int fi ...

  5. rlwrap安装报错You need the GNU readline 解决方法

    首先大家肯定知道rlwrap是干什么的? 在linux以及unix中,sqlplus的上下左右.回退无法使用,会出现乱码情况.而rlwrap这个软件就是用来解决这个的.   这个错误曾经困扰我很久很久 ...

  6. 在eclipse中查看sources源码和JavaDoc帮助文档

    今天学习Netty的过程中,从官网下载的netty里面的内容如下: 其中jar文件夹里面的内容如下: 可以看到每一个具体的jar包就对应有一个sources.jar包,然后所有的帮助文档在javaDo ...

  7. JBOSS 数据源配置并使用JNDI调用

    -- 本文出自sleest (感谢yangjj ^_^) 场景分析: 某天系统的数据库维护方要求进行DG备库容灾演练,要把生产用RAC库模拟宕机并转移至DG备库上,由于是failover而不是swit ...

  8. javascript的replace方法的高级应用

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

  9. ios开发之--NSString的操作

    NSString的操作,下面记录下他的常用方法: NSString *str = @"1111111111aaaaaaaaa2222222222"; 1.查找 //查找 NSRan ...

  10. android 读书笔记 1

    四层linux 内核层library java 虚拟机frameworkapplication 四组件活动(activity), 服务(service), 广播接收器(broadcast receiv ...