[工具（前端）] 全局组件+函数调用

最新推荐文章于 2024-05-30 15:07:12 发布

AWenc

最新推荐文章于 2024-05-30 15:07:12 发布

阅读量314

点赞数

分类专栏：工具[前端] 文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/qq_38420303/article/details/124751618

版权

工具[前端] 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

[工具（前端）] 全局组件+函数调用

写一个组件,并且调用对前端开发者来说是一件非常容易的事情.

但是在实际开发中,比如:前端在调用后端接口时,需要弹出一个loading的遮罩层来防止用户多次点击,当接收到回调时,关闭遮罩层.我们该如何实现?

如果使用一般组件进行调用,是可以实现的,可以当项目有非常的多的界面时,每个界面都要引用这个组件,如果修改了这个组件,势必会导致要修改所有引用了该组件的界面,想想就是一种折磨!!!所以这个时候需要一种封装的思想,也就是将该组件全局化.

文章以全局loading组件为例,进行简单的全局组件+函数调用的使用

代码仓库在 [工具（前端）] 后台管理模板有说明

开搞

根据vue3文档,以及百度,总结一下思路

生成组件实例->挂载在某个dom结点下->调用组件内部方法,进行显示与隐藏

1. 新建组件 component/loading/index.vue

<template>
    <div class="cusLoading" v-if="isShow">
        <div class="loader">
            <div class="spinner"></div>
            <div class="text">{{content}}</div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                content: 'Loading',
                isShow :false,
            }
        },
        mounted() {

        },
        methods: {
            show(text){
                this.isShow = true;
                this.content=text;
            },
        },
        components: {}
    }
</script>
...

利用内部的show方法进行显示

2.新建文件 component/loading/index.js

该文件的功能就是为了实例化组件,并挂载在dom结点上

import cusLoadingComponent from "./index.vue";
import { createApp, h } from "vue";
const app = createApp(cusLoadingComponent); //实例化组件
const div = document.createElement("div"); //生成div结点
document.body.appendChild(div);  //将div结点挂载到body下

const instance = app.mount(div); //将loading组件挂载在div结点下,并返回实例对象

export default {
    show(txt='Loading'){ 
        instance.show(txt); //调用loading实例对象的show方法
    },
    close(){
        app.unmount(div);  //销毁结点
        div.remove();
    }
}

1. 引用

挂载到vue的原型上

//main.js
import loading from './components/loading/index.js'
app.config.globalProperties.$loading = loading;

1. 使用

单个界面中的使用

//home.vue

//显示
 this.$loading.show();
//关闭
 this.$loading.close();

在http.js(axios封装中使用)

//http.js
import loading from '../components/cusLoading/index.js'

// axios 请求拦截 
service.interceptors.request.use(
    config => {
        loading.show();
        return config
    },
    err => { 	return Promise.reject(err); }
);

//axios 相应拦截
service.interceptors.response.use(
    response => {
        loading.close();
        return response
    },
    err => { 	return Promise.reject(err); }
);