自定义一个全局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. swig和angular双花括号的冲突

    swig和angular都用{{name}}来作为模板中变量的取值, 那么要共用的话怎么办: {% raw %}{{ foobar }}{% endraw %} 或者 config(['$interp ...

  2. Linux/Centos下/lib64/libc.so.6: version `GLIBC_2.14' not found问题

    Centos的某个版本下编译了一个可执行程序,复制到另外一个Centos环境下去执行,结果出现了以下错误: /lib64/libc.so.6: version `GLIBC_2.14' not fou ...

  3. ssh跟ssm的区别

    SSH跟SSM的区别 SSH指的是:spring+Struts+hibernate:而SSM指的是:spring +SpringMVC + MyBatis. 1.Spring是是开源框架,是轻量级的I ...

  4. javascript 作用域、作用域链理解

    JavaScript作用域就是变量和函数的可访问范围. 1.变量作用域 在JavaScript中,变量作用域分为全局作用域和局部作用域. 全局作用域 任何地方都可以定义拥有全局作用域的变量 1.没有用 ...

  5. iOS 严重问题解释(crash)

    问题1:Exception Type: 00000020 Exception Codes: 0x000000008badf00d Exception Note: SIMULATED (this is  ...

  6. VIM_manual

    VIM命令---Vi IMproved, a programmers text editor文本编辑 vim不同模式切换 输入模式 末行模式 光标移动 复制-粘贴-删除 可视模式 末行模式下的操作 v ...

  7. 用JAVA发送一个XML格式的HTTP请求

    import java.io.BufferedInputStream; import java.io.BufferedReader; import java.io.ByteArrayOutputStr ...

  8. XSS三重URL编码绕过实例

    遇到一个很奇葩的XSS,我们先来加一个双引号,看看输出: 双引号被转义了,我们对双引号进行URL双重编码,再看一下输出: 依然被转义了,我们再加一层URL编码,即三重url编码,再看一下输出: URL ...

  9. X-WAF简单测试体验

    X-WAF 最近才关注到的一款云WAF,花了一些时间搭建了一个环境,并做了一些测试,感觉比较适合新手来练习WAF Bypass. X-WAF是一款适用中.小企业的云WAF系统,让中.小企业也可以非常方 ...

  10. Ora2Pg的安装和使用

    1. 安装DBI,DBD::Oracle DBI只是个抽象层,要实现支持不同的数据库,则需要在DBI之下,编写针对不同数据库的驱动.对MySql来说,有DBD::Mysql, 而对ORACLE来说,则 ...