Vue3 中自定义插件的实现方法
最近在录 TienChin 项目，项目涉及到了 Vue 中插件的定义，因此整了这么一篇文章，手把手教大家在 Vue3 中定义插件，这个技能掌握了，就可以看懂 TienChin 前端代码了。
1. Vue 插件
在 Vue 中，一些简单的功能，我们可以直接定义为全局方法，然后挂到 Vue 上就能使用了，例如在 vhr 中，我们将网络请求方法进行封装，然后挂到了 Vue.prototype 上就可以了，类似下面这样：
import {postRequest} from "./utils/api";
Vue.prototype.postRequest = postRequest;然后在使用的地方，就可以通过 this.postRequest 去使用了。
小伙伴们需要注意，这个在 Vue3 中有所变化，prototype 变为了 config.globalProperties，也就是在 Vue3 中再想要挂载全局方法，应该是 const app = createApp(App);app.config.globalProperties.useDict = useDict 这种形式了（具体我将在 TienChin 项目中和大家细聊）。
这也算是一种插件定义方式，但是这种一般适用于一些工具方法，无法定义一些比较复杂的插件，复杂的插件还是得通过 Vue 中提供的插件定义方式来定义。
2. 自定义插件
2.1 基本用法
首先我们新建一个目录 plugins 专门用来放我们的插件，然后在这个目录中新建一个 index.js 文件用来开发插件，内容如下：
export default {
install: (app, options) => {
console.log("我的第一个插件")
}
};install 中的方法将会被自动执行。
接下来我们就可以在 main.js 中引入我们这个插件了：
const app = createApp(App); import plugin from './plugins' app.use(plugin);
app.use 就表示引入插件，引入插件之后，插件中的 install 方法就会被自动执行。
app.use 方法接收两个参数，第一个参数就是我们导入的插件 js 对象，第二个参数是可选的，大家看到插件定义时候的 install 方法有两个参数，第一个参数是 Vue 实例，这是自动传入的，第二个参数 options 则是我们在 app.use 中，通过第二个参数传入进来的。当然上面这个例子中松哥没有传递第二个参数。
好了，如此配置之后，接下来启动项目，控制台就可以看到有日志打出了。
这样的插件未免过于简单，接下来我们就给这个插件加点料。
2.2 加入组件
首先我们定义一个新的组件，如下：
<template>
<div>
<h1><a href="http://www.javaboy.org" rel="external nofollow" rel="external nofollow" rel="external nofollow" >javaboy</a></h1>
</div>
</template>
<script>
export default {
name: "MyBanner"
}
</script>然后我们现在就可以在插件中将这个组件注册为一个全局组件了，如下：
import MyBanner from "@/plugins/components/MyBanner";
export default {
install: (app, options) => {
console.log("我的第一个插件")
app.component('my-banner', MyBanner);
}
};首先在插件中导入这个组件，然后通过 app 进行组件注册，注册完成后，我们就可以在项目任意位置使用 my-banner 组件了，如下：
<template>
<div>
<my-banner></my-banner>
</div>
</template>最终显示效果如下：
2.3 加入指令
我们甚至还可以在插件中注册一个指令，如下：
import MyBanner from "@/plugins/components/MyBanner";
export default {
install: (app, options) => {
console.log("我的第一个插件")
app.component('my-banner', MyBanner);
app.directive("font-size", (el, binding, vnode) => {
var size = 16;
switch (binding.arg) {
case "small":
size = 16;
break;
case "large":
size = 32;
break;
default:
size = 48;
break;
}
el.style.fontSize = size + "px";
});
}
};现在，我们就可以在项目中随时随地去使用这个指令了，例如在我们刚刚自定义的 my-banner 中使用这个指令：
<template>
<div>
<h1><a href="http://www.javaboy.org" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-font-size:small>javaboy</a></h1>
</div>
</template>
<script>
export default {
name: "MyBanner"
}
</script>我们甚至可以通过 options 将指令中字体的大小动态的传进来，如下：
import MyBanner from "@/plugins/components/MyBanner";
export default {
install: (app, options) => {
console.log("我的第一个插件")
app.component('my-banner', MyBanner);
app.directive("font-size", (el, binding, vnode) => {
var size = 16;
switch (binding.arg) {
case "small":
size = options.small;
break;
case "large":
size = options.large;
break;
default:
size = options.defaut;
break;
}
el.style.fontSize = size + "px";
});
}
};options 是插件注册时候传入的一个 JSON 参数，small、large 以及 default 分别对应的字体多大，要看插件注册时传入的值：
const app = createApp(App);
import plugin from './plugins'
app.use(plugin, {small: 16, large: 32, default: 48});第二个参数，大家看，就是 options 参数的值。
现在大家想想我们平时用 ElementUI 的时候，Vue.use 方法，传入 ElementUI，再传入一些其他参数，看了上面这个例子，ElementUI 引入到底是怎么个引入法现在大家就明白了吧。
2.4 provide & inject
在插件中，也可以通过 provide 来提供一个方法，在需要使用该方法的地方，通过 inject 注入方法，然后就可以使用了，如下：
import MyBanner from "@/plugins/components/MyBanner";
export default {
install: (app, options) => {
console.log("我的第一个插件")
app.component('my-banner', MyBanner);
app.directive("font-size", (el, binding, vnode) => {
var size = 16;
switch (binding.arg) {
case "small":
size = options.small;
break;
case "large":
size = options.large;
break;
default:
size = options.defaut;
break;
}
el.style.fontSize = size + "px";
});
const clickMe = () => {
console.log("==========clickMe=========")
}
app.provide('clickMe', clickMe);
}
};在需要使用的地方，通过 inject 注入方法后就可以使用了，如下：
<template>
<div>
<h1><a href="http://www.javaboy.org" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-font-size:small>javaboy</a></h1>
</div>
</template>
<script>
import {inject} from "vue";
export default {
name: "MyBanner",
mounted() {
const clickMe = inject('clickMe');
clickMe();
}
}
</script>3. 小结
整体上来说，通过这种方式来自定义插件，能够实现的内容比较丰富。如果只是想挂一个全局方法来用，那么其实是没有必要定义插件的。如果只是想挂载一个全局方法，在 Vue2 中可以按照如下方式使用：
Vue.prototype.postRequest = postRequest;
在 Vue3 中则可以通过如下方式：
app.config.globalProperties.useDict = useDict
到此这篇关于Vue3 中自定义插件的文章就介绍到这了,更多相关Vue自定义插件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了关于element ui中el-cascader的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了JavaScript 沙箱探索，沙箱是基于 event bus 形式的通信实现上层的功能，文章的例子选择接口实现了 web worker 与 quickjs 的 EventEmitter，,需要的朋友可以参考一下2021-10-10
在vue3中, 提供了一个 useAttrs 的方法它接收到的参数一 prop中可以接收到的数据是基本一样的如果我们想自已写一个组件, 把 elementPlus 中的期中一个组件封装一下,这篇文章主要介绍了vue3中的useAttrs和props的区别,需要的朋友可以参考下2023-09-09
这篇文章主要为大家展示了一个demo，即利用Vue和OpenLayer在地图上面添加风场效果，文中的示例代码讲解详细，感兴趣的小伙伴可以了解一下2022-04-04
这篇文章主要介绍了vuex实现的简单购物车功能,结合实例形式分析了vuex购物车组件相关商品列表、购物车创建、添加、删除、清空等相关操作技巧,需要的朋友可以参考下2019-02-02
这篇文章主要介绍了vue 父组件中调用子组件函数的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-06-06
文章主要介绍了Vue3中的响应式数据处理机制,包括ref和reactive函数的使用,它们的区别,以及如何使用watch和watchEffect来监听数据变化,文章最后提到了Vue3的生命周期钩子和自定义hooks的概念,感兴趣的朋友跟随小编一起看看吧2024-11-11
这篇文章主要介绍了vue初尝试--项目结构的相关知识,需要的朋友可以参考下2018-01-01
本文主要对介绍利用Vue.js 的递归组件，实现了一个最基本的树形菜单。具有很好的参考价值，下面就跟着小编一起来看下吧2016-12-12
这篇文章主要介绍了将vue的项目打包后通过百度的BAE发布到网上的流程,主要运用的技术是vue+express+git+百度的应用引擎BAE。需要的朋友可以参考下2018-03-03
最新评论