Vue学习记录之十六自定义Vue插件

news2024/10/21 0:26:10

一、创建目录

在components的Loading文件夹下建立 index.ts 和 index.vue两个文件。ts文件是一个 TypeScript 文件，通常用于编写逻辑、功能模块或导出一些工具函数、类、接口等。

二、编写插件内容

index.ts

/*
支持两种格式：
1、是对象形式: 对象形式必须包含一个install函数。他会回传一个app，这个app就是我们main.ts中的app
2、是函数形式
*/
import type {
   App,VNode} from 'vue'
import Loading from './index.vue' //引入自定义插件
import {
    createVNode,render } from 'vue'  //将内容转化为vnode格式，方便阅读
export default{
   
    install(app:App){
   
        const Vnode:VNode = createVNode(Loading)
        render(Vnode,document.body)  //挂载，第一个是挂载的内容，第二个是挂载点(因为是全局的，我们挂载到document.body上)
        //通过Vnode.component?.exposed 读取插件中的属性和方法
        //设置为全局变量
        app.config.globalProperties.$loading={
   
            show: Vnode.component?.exposed?.show,
            hide: Vnode.component?.exposed?.hide,
        }
        //调用，下面操作会在每个页面上都显示show().
        //app.config.globalProperties.$loading.show()
        //console.log(app,123,Vnode.component?.exposed)
    }
}