首页前端开发VUEVue3 如何编写一个插件

Vue3 如何编写一个插件

时间2023-12-07 09:56:02发布访客分类VUE浏览614
导读:Vue3 插件插件 (Plugins 是一种能为 Vue 添加全局功能的工具代码。插件注册形式一个插件可以是一个拥有 install( 方法的对象,也可以直接是一个安装函数本身。install 方法对象export default {...

Vue3 插件

插件 (Plugins) 是一种能为 Vue 添加全局功能的工具代码。

插件注册形式

一个插件可以是一个拥有 install() 方法的对象,也可以直接是一个安装函数本身。

  • install 方法对象
export default {
    
    install: (app :any, options: any) =>
 {
    

        // 提供一个全局方法
        app.config.globalProperties.$Alert  = (val:any) =>
 {

            alert(`我是弹出的内容 ${
val}
`)
        }


        // 提供一个全局属性
        app.config.globalProperties.$Info = {

            code: 200,
            msg: "数据接收"
        }


        // 通过provide 注册一个全局属性
        app.provide('$MyInfo',{

   
            data: "provide 提供的数据"
        }
)

        // 提供一个全局指令
      	app.directive('format-data', {

          /* ... */
        }
)
    }

}
    
  • 安装函数本身

一般注册全局组件这样写。

import componentA from "../package/componentA";
     // 引入封装好的组件
....


const componentList = [componentA,componentB,componentC,];
 // 将来如果有其它组件,都可以写到这个数组里

// 批量组件注册
const install = function (Vue) {
    
  componentList.forEach((com) =>
 {
    
    Vue.component(com.name, com);

  }
    );

}
    ;
    

export default install;
     // 这个方法以后再使用的时候可以被use调用

插件主要的场景

  1. 通过 app.component() 和 app.directive() 注册一到多个全局组件或自定义指令。

!---->

  1. 通过 app.provide() 使一个资源可被注入进整个应用。

!---->

  1. 向 app.config.globalProperties 中添加一些全局实例属性或方法

!---->

  1. 一个可能上述三种都包含了的功能库 (例如 vue-router)

使用插件

当编写插件完时,我们需要使用时,我们可以在入口文件中,引入插件,然后通过 Vue.use() 注册使用 该插件。 插件内部暴露了一个 install 方法, Vue 会执行该方法去安装注册(指令,组件,全局属性等)

注册插件

import  myPlugin  from "./plugins/utils/index.js"


const app = createApp(App)

app.use(myPlugin)
app.use(router)

app.mount('#app')

在组件中使用插件

  1. 通过 getCurrentInstance 的 proxy 使用,不过 proxy 的 ts 类性中还有一个 undefined,所以使用 ts 时,类型就要自己处理了

!---->

  1. 通过 getCurrentInstance 的 appContext 使用,appContext 获取的即为 main.js 里创建的的 vue 对象.
import {
 getCurrentInstance }
 from 'vue'

const {
 proxy }
 = getCurrentInstance()
console.log(proxy, proxy.$Test())



const {
 $Alert,$Info }
     = getCurrentInstance().appContext.config.globalProperties


//使用插件提供的方法和属性
const getData = () =>
 {

    console.log($Info)
    console.log(myInfo)
    $Alert("测试")
}
    

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!


若转载请注明出处: Vue3 如何编写一个插件
本文地址: https://pptw.com/jishu/571799.html
【手写Vue】-手撕Vue-实现事件相关指令 Scala爬虫如何实时采集天气数据?

游客 回复需填写必要信息