自定义一个全局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. matlab中 %d,%f,%c,%s代表什么意思

    1.%d就是输出整型:%3d就是说按照长度为3的整型输出,比如10,输出就是“_10”,“_”代表空格. 2.%f就是输出小数:%6.2f就是小数点后保留2位,输出总长度为6,比如3.14159,输出 ...

  2. Mongodb学习笔记(1)--入门

    文档 多个键及关联的值有序的放置在一起就是文档,如"greeting":"Hello World!" 特点 文档中键值对是有序的 除了字符串还可以是其他类型:& ...

  3. 用C++做微信公众平台开发的后台开发时,用sha1加密验证的方法

    微信公众平台开发时,须要验证消息是否来自微信server,这要用到sha1加密算法.官网上给的是php的sha函数,C++中要用到以下这个函数: 一.引入头文件: #include<openss ...

  4. sqlserver修改主机名

    sqlserver迁移后,主机和原机器不符,将系统修改主机名后,数据库代理服务.邮件服务无法启动 执行下面语句,检查sqlserver中windows主机名 -- 检查SQL Server中的&quo ...

  5. Thinkphp5笔记七:设置错误页面②

    更加完美的去设置错误页面. 一.准备一个错误页面 error.html,位置:thinkphp\template\index\default\error.html ,准备把前段所有的错误提示都指向这里 ...

  6. DWZ主从表界面唯一性验证(自写js)(一)

    最近在项目中遇到一个问题,它的需求是: 利用DWZ的主从表结构批量添加课程信息,需要在触发课程代码文本框的离开事件时验证: 1.是否选择学院. 2.数据库里是否已存在该课程代码. 3.多条数据添加时, ...

  7. .NET 4并行编程入门之Task的取消[转]

    原文:http://www.cnblogs.com/Leo_wl/archive/2010/06/01/1749596.html前言:因为Task是.NET 4并行编程最为核心的一个类,也我们在是在并 ...

  8. Npm基本指令(转)

    一些常用的 npm 指令 當你設定好 node.js 的開發環境後, 是時候來把下面這些常用的 npm 指令給摸熟了. 將套件於全域安裝. 全域安裝的套件通常只是為了執行檔而已. $ npm inst ...

  9. 嵌入式系统之ubootENV环境变量

    从bootm 命令讲起 1 找到linux的内核入口 Bootm命令通过读取uImage的头部0×40字节的信息,将uImage定位到正确的地址,同时找到linux的内核入口地址. 这个地方就涉及到u ...

  10. CentoOS6.6安装netcat

    http://blog.csdn.net/u013673976/article/details/47084841 CentOS下安装netcat 使用zookeeper过程中,需要监控集群状态.在使用 ...