Vue3 -- plugin插件

最新推荐文章于 2024-08-01 03:56:03 发布

爱划水de鲸鱼哥～

最新推荐文章于 2024-08-01 03:56:03 发布

阅读量3.9k

点赞数

分类专栏： Vue3 文章标签： vue javascript plugin js

本文链接：https://blog.csdn.net/m0_47901007/article/details/118652264

版权

plugin插件

plugin插件是用来为 Vue 添加全局功能，把通用性的功能进行封装。

定义插件

定义插件需要使用 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象。

        const myPlugin = {
            install(app, options){
               console.log(app, options); 
            }
        }

使用插件

通过全局方法 Vue.use() 使用插件

	pp.use(myPlugin,{name: '张三'})

打开控制台看看app, options分别会输出什么内容。
在这里插入图片描述

从图中可以看出，app包含有directive自定义指令、mixin混入以及config配置等内容，options里面是使用插件传入的{name: ‘张三’}。

添加directive

在plugin插件中添加directive。

 		const myPlugin = {
            install(app, options){
                app.directive("focus",{
                    mounted(el){
                        el.focus();
                    }
                })
            }
        }

输入框获得焦点
在这里插入图片描述

添加mixin

在plugin插件中添加mixin。

 		const myPlugin = {
            install(app, options){
                app.mixin({
                    mounted(){
                        console.log('mixin');
                    }
                })
            }
        }

控制台成功输出：mixin。

在这里插入图片描述

添加config

在plugin插件中添加config。

 		install(app, options){
                app.config.globalProperties.$hello = 'hello';
            }
        }

然后在组件中调用hello，控制台成功打印出hello。
在这里插入图片描述

完整代码

<!DOCTYPE html>

最低0.47元/天解锁文章

爱划水de鲸鱼哥～

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录