自定义一个全局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. iOS:scale image

    UIGraphicsBeginImageContextWithOptions(newSize, NO, 0.0); [image drawInRect:CGRectMake(, , newSize.w ...

  2. 解决AF3 诡异的页面显示问题

    使用AF3开发应用,发现有一个bug,在同一个view下面的不同页面切换后,这时候切换到别的view中的页面,然后再切换到上一个view下的页面,此时只要目标不是刚才前一个view中的最后显示页面就会 ...

  3. Xcode 6 免证书真机调试

    前景:在 iOS 开发中,如果想进行真机调试,普遍情况是掏钱,掏钱的情况有两种: 第一种就是:直接在 Apple 官网注册为 Developer,每年99美元:当然这种作为个人开发者的话,是很有必要的 ...

  4. Http Cookie Manager、session

     1. JMeter Http Cookie Manager的作用: (1)自动管理 (2)象浏览器一样的存储和发送Cookie.如果你请求一个站点,然后他的Response中包含Cookie,Coo ...

  5. Deep Voice

    https://arxiv.org/abs/1702.07825 听起来和真人声非常接近了.

  6. 解决PHP中文乱码问题

    1.指定链接字符串编码: $mysql_server_name="localhost"; //数据库服务器名称 $mysql_username="root"; ...

  7. MySQL修改密码和忘记ROOT密码

    1.关闭数据库 脚本:[root@mysql etc]# service mysql stop 2.使用脚本: mysqld_safe --skip-grant-tables 启动数据库 使用/usr ...

  8. js获取图片原始大小

    摘要: 浏览器中显示的图片大小未必是他真实的高和宽,比如像下面这样,我们给他加上宽和高的样式 <img src="IE.png" style="width:25px ...

  9. Xcode工程添加第三方文件的详细分析 Create folder references for any added folders(转)

    在开发iOS项目的时候需要导入第三方的库文件,但是通过Xcode导入第三方源文件的时候会提示一些信息,不知所以然. 现在看到的文档都是针对Xcode3的,针对Xcode4的说明很少,现在分享出来. 官 ...

  10. 【剑指Offer学习】【面试题23:从上往下打印二叉树】

    题目:从上往下打印出二叉树的每一个结点,同一层的结点依照从左向右的顺序打印. 二叉树结点的定义: public static class BinaryTreeNode { int value; Bin ...