自定义插件

在 Vue3 中，我们可以自定义插件来扩展 Vue 的功能。自定义插件可以包含全局指令、全局组件、实例方法等各种功能。

自定义插件

插件 (Plugins) 是一种能为 Vue 添加全局功能的工具代码。下面是一个示例代码：

import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);
// 定义一个名为 myPlugin 的插件
const myPlugin = {
  install(app) {
    app.config.globalProperties.$myMethod = () => {
      alert("Hello from $myMethod");
    };
  },
};

// 使用插件
app.use(myPlugin);
app.mount("#app");

在上面的代码中，我们首先通过install方法定义了一个插件myPlugin，在这个插件中，我们使用app.config.globalProperties给应用的实例添加了一个$myMethod的实例方法。

需要注意的是，安装插件时，使用app.use()方法来加载插件。

实例方法

以引入 Vue3 的事件总线 mitt 为例

mitt

Mitt 是一个轻量级的、功能齐全的事件发射器/发布订阅库，它的特点是体积小（大约 200 字节），并且不依赖于任何框架，可以跨框架使用。

安装 mitt挂载 mittlogin.vue 订阅事件comp.vue 派发事件

bash

npm install mitt

import { createApp } from "vue";
import App from "./App.vue";
import mitt from "mitt";
const app = createApp(App);
// 创建 mitt 实例, 并挂载到自定义全局属性 $bus 上 (这里也可以用依赖注入的方式实现)
app.config.globalProperties.$bus = mitt();
app.mount("#app");

vue

<script setup>
import { getCurrentInstance } from "vue";
const instance = getCurrentInstance();
// 引入全局属性 $bus
const bus = instance?.appContext.config.globalProperties.$bus;
// 在钩子函数中订阅事件
onMounted(() => {
  bus.off("on-login");
  bus.on("on-login", (val) => {
    // 通过 bus.emit('on-login', 'open')
    console.log("login...", val);
  });
});
</script>

vue

<script setup>
import { getCurrentInstance } from "vue";
const instance = getCurrentInstance();
const bus = instance.appContext.config.globalProperties.$bus;
// 在任何组件均可使用, 使用方式
bus.emit("on-login", "open");
</script>

自定义组件内指令

首先，让我们看一下如何创建一个自定义插件，以全局指令为例：

vue

<template>
  <div v-custom-directive>Lorem ipsum dolor sit amet</div>
</template>

<script setup>
const vCustomDirective = {
  mounted(el) {
    el.style.color = "red";
  },
};
</script>

在上面的代码中，指令会在绑定元素被插入到 DOM 中时调用，我们在这个钩子函数中将绑定元素的文字颜色设置为红色。

需要注意的是，在使用自定义指令时，需要以v-为前缀使用该指令。详情见下一章 自定义指令

自定义插件 ​