vue自定义全局loading加载组件

Posted 2023-03-24

参考技术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>