vue自定义全局loading加载组件

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue自定义全局loading加载组件相关的知识,希望对你有一定的参考价值。

参考技术A

新建components文件夹-新建loading001文件夹-新建index.vue+index.js
index.vue

index.js

main.js引入

页面中引用

在js中引用,如封装axios场景

vue-cli -- 自定义配置全局组件

一、全局配置

1、创建公共组件

在components文件夹load中新建loading.vue和loading.js两个文件,vue文件用来写公共组件,js用来导出这个组件

2、导出公共组件

在loading.js中,规定了使用这个组件的名字,以及使用方法

import Loading from './loading.vue'
const loading={
    install:function(Vue){
        // Vue.component()是用来注册全局组件的
        Vue.component('loading',Loading)
    }  // loading'这就是后面可以使用的组件的名字,install是vue实例上默认的一个方法
}
export default loading

3、引入公共组件

// 在main.js中引入自定义配置的组件,并挂载到vue上
import Loading from './loading'
Vue.use(Loading)

4、调用公共组件

可以在项目中的任何地方使用自定义的组件了

<template>
    <div>
        <loading></loading>
    </div>
</template>

二、局部配置

1、写好全局组件

在components中创建一个loading.vue的文件,里面写好逻辑代码

2、局部引入组件

这里就比上面简单一点,我们在需要使用这个组件的vue文件中直接引入这个vue文件,然后在component中注册一下,就可以使用了

// 引入组件
import Loading from '@/components/loading'

// 注册组件,一定要注册,不然没有效果
components: {
    Loading
}

// 调用这个组件
<loading></loading>

以上是关于vue自定义全局loading加载组件的主要内容,如果未能解决你的问题,请参考以下文章

vue.2.0-自定义全局组件

vue-cli -- 自定义配置全局组件

Vue 使用useprototype自定义自己的全局组件

Vue自定义插件(组件)Loading

自定义vue全局组件use使用vuex的使用

vue自定义组件