写点什么

Vue3 如何编写一个插件

作者:程序员海军
  • 2023-04-17
    上海
  • 本文字数:1138 字

    阅读完需:约 4 分钟


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() 注册一到多个全局组件或自定义指令。

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

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

  4. 一个可能上述三种都包含了的功能库 (例如 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 时,类型就要自己处理了

  2. 通过 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("测试")}
复制代码


发布于: 刚刚阅读数: 3
用户头像

🏆微信公众号:【前端自学社区】 2020-04-02 加入

🏅目前从事物流,铁路相关的前端全栈开发工作. 🏆 InfoQ 首批签约作者 🏆荣获2021/2022年度社区共建奖 😊个人微信: daxin261

评论

发布
暂无评论
Vue3 如何编写一个插件_Vue3_程序员海军_InfoQ写作社区