自定义一个全局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资源打包只能打包场景材质,不能打包脚本

    GameObject附带脚本打包进来以后,只有一个脚本名字,估计只是关联了脚本,内容却不在,所以后面打包资源的话,一定要把脚本,shader之类的,放到工程目录下

  2. 史上最全的 Sublime Text 汉化、插件安装合集

    0.前言 本文用于给新手小白用户指明前进方向.不用做商业推广. 其次,鼓舞购买正版.拒绝盗版. 好了.口号喊完,接下来就直接開始正文. 1. Sublime Text 介绍 首先在開始前,先来介绍一下 ...

  3. Windows下使用最新的JDK1.7.0_51以上版本连接Jenkins出现SecurityException

    我在slave节点上安装了jdk1.8, 当在节点上启动slave-agent的时候,报安全性限制的错误: java.lang.SecurityException: Missing required ...

  4. multiselect2side:jQuery多选列表框插件

    http://blog.csdn.net/rosanu_blog/article/details/8550723 http://www.bkjia.com/jQuery/449193.html < ...

  5. redis sentinels哨兵集群环境配置

    # Redis configuration file example. # # Note that in order to read the configuration file, Redis mus ...

  6. 时间戳Id

    ID:格式据1970.1.1毫秒数 1535091029740  13位 问题:高并发,分布式明显会有问题,网上有雪花算法,但是位数跟我需要的不一样,暂时不考虑,以后研究再用. 参考: https:/ ...

  7. Websphere安装配置与项目部署

    0x01 下载安装 1.在IBM官网下载安装包 打开下载地址,需注册账户,登录后,选择Windows 64-bit下载 2.解压缩,运行install.exe文件 3.输入刚才注册的用户名和密码,并输 ...

  8. 【RF库Collections测试】Remove Duplicates

    Name:Remove DuplicatesSource:Collections <test library>Arguments:[ list_ ]Returns a list witho ...

  9. SaltStack 使用 Jinja2 模板

    Jinja2 是基于 python 的一个模板引擎,如下,使用 Jinja2 实现根据不同的操作系统分发不同的文件: [root@localhost ~]$ cat /srv/salt/test.sl ...

  10. Splash wait() 方法

    wait()方法用于控制页面的等待时间,如下,实现访问淘宝并等待2秒,随后返回淘宝页面的源代码: function main(splash) splash:go("https://www.t ...