自定义插件
自定义插件
在 Vue3 中,我们可以自定义插件来扩展 Vue 的功能。自定义插件可以包含全局指令、全局组件、实例方法等各种功能。
自定义插件
插件 (Plugins) 是一种能为 Vue 添加全局功能的工具代码。下面是一个示例代码:
js
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 字节),并且不依赖于任何框架,可以跨框架使用。
bash
npm install mitt
js
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-
为前缀使用该指令。详情见下一章 自定义指令