vue3自定义插件的作用场景及使用示例详解
更新时间：2023年02月23日 10:34:50 作者：元子不圆呀
这篇文章主要为大家介绍了vue3自定义插件的作用场景及使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
插件的作用场景
在vue2的插件那篇文章我们介绍过插件其实就是vue的增强功能。通常来为vue添加全局功能的。在vue3中插件的功能也是一样的，只是它们在定义上有所不同。
- 通过app.component()和app.directive()注册一到多个全局组件或自定义指令
- 通过app.provide()使一个资源可被注入进整个应用
- 向app.config.globalProperties中添加一些全局实例属性或方法
- 一个可能上述三种都包含了的功能库（如vue-router）
插件的定义（注册）
一个插件可以是一个拥有 install() 方法的对象，也可以直接是一个安装函数本身。安装函数会接收到安装它的应用实例和传递给 app.use() 的额外选项作为参数：
下面是我定义的一个插件，为了方便管理，在src目录下新建一个plugins文件夹，根据插件的功能，文件夹里面可以放置很多js文件。
export default {
install: (app, options) => {
// 注入一个全局可用的方法
app.config.globalProperties.$myMethod = () => {
console.log('这是插件的全局方法');
}
// 添加全局指令
app.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
console.log('这是插件的全局指令');
}
})
}
}
插件的安装
我们一般是安装在全局的，这样方便多个组件使用。
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import myPlugin from './plugins/myPlugin'
createApp(App).use(ElementPlus).use(myPlugin).mount('#app');
插件的使用
在组件中使用
<template>
<div v-my-directive></div>
<el-button @click="clicFunc">测试按钮</el-button>
</template>
<script setup>
import { getCurrentInstance } from 'vue';
const ctx = getCurrentInstance();
console.log('ctx', ctx);
const clicFunc = ctx.appContext.app.config.globalProperties.$myMethod();
</script>
效果如下：
插件中的Provide/inject
在插件中，还可以通过provide为插件用户提供一些内容，比如像下面这样，将options参数再传给插件用户，也就是组件中。
// myPlugin.js
export default {
install: (app, options) => {
// 注入一个全局可用的方法
app.config.globalProperties.$myMethod = () => {
console.log('这是插件的全局方法');
}
// 添加全局指令
app.directive('my-directive', {
bind () {
console.log('这是插件的全局指令');
}
})
// 将options传给插件用户
app.provide('options', options);
}
}
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import myPlugin from './plugins/myPlugin'
createApp(App).use(ElementPlus).use(myPlugin, {
hello: '你好呀'
}).mount('#app');
// 组件中使用
<template>
<div v-my-directive></div>
<el-button @click="clicFunc">测试按钮</el-button>
</template>
<script setup>
import { getCurrentInstance, inject } from 'vue';
const ctx = getCurrentInstance();
const hello = inject('options');
console.log('hello', hello);
const clicFunc = ctx.appContext.app.config.globalProperties.$myMethod();
</script>
效果如下：
以上就是vue3自定义插件的作用场景及使用示例详解的详细内容，更多关于vue3自定义插件作用的资料请关注脚本之家其它相关文章！
相关文章
使用Electron打包vue文件变成exe应用程序的全过程
这篇文章主要给大家介绍了使用Electron打包vue文件变成exe应用程序的全过程,文中通过代码示例和图文结合的方式给大家讲解的非常详细,具有一定的参考价值,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了vue 使用eventBus实现同级组件的通讯,需要的朋友可以参考下2018-03-03
这篇文章主要介绍了在vue中使用scrollTo没有效果的解决方法,本文给大家分享具体操作步骤,在这里需要注意scrollTo要作用在可滚动的元素上,不然不生效,scrollTop就会一直为0,需要的朋友可以参考下2023-10-10
使用vue3+ts+setup获取全局变量getCurrentInstance的方法实例
这篇文章主要给大家介绍了关于使用vue3+ts+setup获取全局变量getCurrentInstance的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用vue3具有一定的参考学习价值,需要的朋友可以参考下2022-08-08
在element ui中的日期时间选择组件中默认是00:00,现在需求是点击默认结束时间为当前时分秒,查了很多资料写的都不准确 ,今天给大家分享el-date-picker默认结束为当前时分秒的操作方法,感兴趣的朋友一起看看吧2024-01-01
在本篇文章里小编给各位整理的是一篇关于Vue引入Stylus知识点总结内容，有需要的朋友们可以学习参考下。2020-01-01
这篇文章主要介绍了Vue实现表格首列相同数据合并的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-04-04
这篇文章主要介绍了vue踩坑之在input中使用filters局部过滤器问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
这篇文章给大家介绍了vue使用qrcode生成二维码的方法,在Vue中实现二维码生成需要使用第三方库来处理生成二维码的逻辑,常用的库有qrcode和vue-qrcode,所以接下来小编将给大家介绍vue qrcode生成二维码的方法示例,需要的朋友可以参考下2024-01-01
让多个组件使用同一个挂载点，并动态切换，这就是动态组件。这篇文章主要介绍了Vue动态组件 ,需要的朋友可以参考下2017-08-08
最新评论