返回 导航

Vue.js

hangge.com

Vue.js 3 - 插件的开发教程（对象类型插件、函数类型插件）

作者：hangge | 2026-08-31 09:35

1，基本介绍

（1）插件（Plugin）是一种为 Vue.js 3 添加全局功能的工具代码。Vue.js 3 插件没有严格定义使用范围，但是插件的应用场景主要包括以下 4 种：
  • 通过 app.component 和 app.directive 注册一个或多个全局组件或自定义指令。
  • 通过 app.provide 将一个资源注入整个应用。 
  • 向 app.config.globalProperties 中添加一些全局实例属性或方法。
  • 一个可能包含上述三种功能的功能库，例如 Vue Router。

（2）在编写 Vue.js 3 插件时，通常有以下两种编写方式：
  • 对象类型：一个对象，必须包含一个 install 函数，该函数会在安装插件时执行。 
  • 函数类型：一个 function 函数，该函数会在安装插件时自动执行。 

2，对象类型的插件样例

（1）这里我们采用对象类型的方式编写一个添加全局属性的 Vue.js 3 插件。首先在项目的 src 目录下新建 plugins 文件夹，然后在该文件夹下新建 plugins_object.js 文件，文件内容如下：
  • 可以看到，该对象类型插件首先导出一个必须包含一个 install 函数的对象，该函数会在 app.use 安装插件时执行。
export default {
  install(app) {
    // 该插件是给app实例添加一个全局property：$name
    app.config.globalProperties.$name = "hangge";
  },
};

（2）接着，修改 main.js 文件，导入 pluginObject 对象，然后使用 app.use 函数安装该插件。 
import pluginObject from './plugins/plugins_object'
let app = createApp(App)
app.use(pluginObject) // 安装插件时，会执行插件的install函数
app.use(store)
app.use(router)
app.mount('#app')

（3）最后我们在一个组件中测试下插件是否生效：
  • 首先在 setup 函数中，通过调用 getCurrentInstance API 访问内部组件实例。因为在 setup 函数中不能使用 this 获取组件实例。 
  • 接着，通过 instance.appContext.config.globalProperties 获取 App 实例的全局属性。然后把在 pluginObject 插件中添加到全局属性 $name 的值打印出来。 
  • 需要注意的是：我们可以直接通过 this 访问添加的全局属性。例如，在 mounted 生命周期中，直接通过 this 访问全局属性。 
<template>
    <div>
        <h1>HomeView组件</h1>
    </div>
</template>
<script>
import { getCurrentInstance } from "vue";
export default {
    setup() {
        // 1.在setup函数中访问全局property
        const instance = getCurrentInstance();
        console.log("setup name=", instance.appContext.config.globalProperties.$name);
    },
    mounted() {
        //2.在mounted函数中直接通过this访问全局property
        console.log("mounted name=", this.$name);
    }
}
</script>

（4）运行效果如下，控制台可以正常打印 pluginObject 插件添加的全局属性 $name 的值。 

3，函数类型的插件样例

（1）下面我采用函数类型的方式编写一个同样功能的添加全局属性的 Vue.js 3 插件。在 plugins 文件夹下新建 plugins_function.js 文件，代码如下：
  • 可以看到，该函数类型插件必须导出一个接收 App 实例的函数，该函数会在 app.use 安插件时自动执行。
export default function (app) {
  // 该插件是给app实例添加一个全局property：$name
  app.config.globalProperties.$name = "hangge";
}

（2）接着，修改 main.js 文件，导入 pluginFunction 函数，然后使用 app.use 函数安装该插件。 
import pluginFunction from './plugins/plugins_function'
let app = createApp(App)
app.use(pluginFunction) // 安装插件
app.use(store)
app.use(router)
app.mount('#app')

（3）我们使用同样的方法测试下插件是否生效：
  • 首先在 setup 函数中，通过调用 getCurrentInstance API 访问内部组件实例。因为在 setup 函数中不能使用 this 获取组件实例。 
  • 接着，通过 instance.appContext.config.globalProperties 获取 App 实例的全局属性。然后把在 pluginObject 插件中添加到全局属性 $name 的值打印出来。 
  • 需要注意的是：我们可以直接通过 this 访问添加的全局属性。例如，在 mounted 生命周期中，直接通过 this 访问全局属性。 
<template>
    <div>
        <h1>HomeView组件</h1>
    </div>
</template>
<script>
import { getCurrentInstance } from "vue";
export default {
    setup() {
        // 1.在setup函数中访问全局property
        const instance = getCurrentInstance();
        console.log("setup name=", instance.appContext.config.globalProperties.$name);
    },
    mounted() {
        //2.在mounted函数中直接通过this访问全局property
        console.log("mounted name=", this.$name);
    }
}
</script>

（4）运行效果如下，控制台可以正常打印 pluginFunction 插件添加的全局属性 $name 的值。 
评论

全部评论（0）

回到顶部