vue3 基础-插件 plugin
前几篇我们介绍了 mixin 混入的的方式能实现对代码的复用, 而本篇将要介绍的 plugin 将会更加适合这种通用性功能的代码的复用和扩展.
最常用的场景, 比如轮播图就非常实用 plugin 来实现封装, 首先来直观演示一下插件的使用过程.
plugin 初体验
这里我们给 app 扩展一个插件, 功能是给 app 扩展一个 name 属性, 值是 youge, 然后将这个数据传给子组件 Son 去使用, 当然这里跨层传递咱直接用 provide - inject 的方式即可.
<!DOCTYPE html>
<html lang="en">
<head>
<title>插件 plugin 初体验</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
// 1. 定义个插件, 给 app 扩展一个 name 数据, 并在 app 中使用
const myPlugin = {
install(app, options) {
// console.log(app, options)
// app 表示这个 vue 实例 app
// options 表示传入的操作或者数据
app.provide('name', 'youge')
}
}
const app = Vue.createApp({
template: `
<Son />
`
})
// 3. 通过 provide-inject 的方式来跨层传递/接收数据
app.component('Son', {
inject: ['name'],
template: `<div>{{name}}</div>`
})
// 2. 注册定义的插件 myPlugin
app.use(myPlugin)
const vm = app.mount('#root')
</script>
</body>
</html>
即 plugin 的基本使用流程就是:
- 在 app 外定义个插件对象, 里面定义一个 install 方法, 传两个参数即 app 和 options
- 在使用的时候, 这个 app 即是 vue 的实例, options 则是一些输入操作等, 功能逻辑都封装在 install 中
- 在最外层对 plugin 进行一个注册使用, 即 app.user(插件名称)
更多的扩展
因其 plugin 的 install 能获取到 app 和 options 那理论上就可以做 n 多个扩展啦, 比如什么自定义指令呀, mixin呀, 甚至顶层属性扩展都是 ok 的.
<!DOCTYPE html>
<html lang="en">
<head>
<title>plugin 能随便你扩展啦</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
// 能支持更多你想要的扩展骚操作
const myPlugin = {
install(app, options) {
// 1. 扩展数据
app.provide('name', 'youge')
// 2. 扩展自定义指令
app.directive('focus', {
mounted (el) {
el.focus()
}
})
// 3. 扩展 mixin
app.mixin({
mounted () {
console.log('my mixini')
}
})
// 4. 扩展 vue 底层的全局属性
// 比如咱之前会将 echarts 整个应用挂载到 appd 的原型链上, 全局使用
app.config.globalProperties.$echarts = 'echarts'
}
}
const app = Vue.createApp({
template: `
<Son />
`
})
app.component('Son', {
inject: ['name'],
mounted () {
console.log('这里为演示将其写成字符串了哈: ', this.$echarts)
},
template: `
<div>
<div>{{name}}</div>
<input v-focus />
</div>`
})
// 记得一定要 注册定义的插件 myPlugin
app.use(myPlugin)
const vm = app.mount('#root')
</script>
</body>
</html>
这个就是 plugin 的强大之处啦, 不过目前呢, 我好像除了轮播图, 似乎也没有用到哈哈哈, 但是它很强.
总结
- 在 app 外定义个插件对象, 里面定义一个 install 方法, 传两个参数即 app 和 options
- 在使用的时候, 这个 app 即是 vue 的实例, options 则是一些输入操作等, 功能逻辑都封装在 install 中
- 在最外层对 plugin 进行一个注册使用, 即 app.user(插件名称)
- 理论上能扩展 N 个东西, 如 传数据, mixin, 自定义指令, 底层属性等等, 就很强
vue3 基础-插件 plugin的更多相关文章
- MS CRM 2011的自定义和开发（11）——插件(plugin)开发（一）
http://www.cnblogs.com/StoneGarden/archive/2012/02/02/2336147.html MS CRM 2011的自定义和开发(11)——插件(plugin ...
- MS CRM 2011的自定义和开发（11）——插件(plugin)开发（三）
http://www.cnblogs.com/StoneGarden/archive/2012/02/06/2340661.html MS CRM 2011的自定义和开发(11)——插件(plugin ...
- MS CRM 2011的自定义和开发（11）——插件(plugin)开发（四）
http://www.cnblogs.com/StoneGarden/archive/2012/02/08/2343294.html MS CRM 2011的自定义和开发(11)——插件(plugin ...
- MS CRM 2011的自定义和开发（11）——插件(plugin)开发（二）
http://www.cnblogs.com/StoneGarden/archive/2012/02/06/2339490.html MS CRM 2011的自定义和开发(11)——插件(plugin ...
- 互联网轻量级框架SSM-查缺补漏第八天（MyBatis插件plugin使用及原理）
简言:今天进行第八天的记录(只是写了八天).有的时候看的多,有的时候看的少,看的少的时候就攒几天一起写了.而今天这个插件我昨天写了一下午,下班没写完就回去了,今天把尾收了,再加上一个过程图方便下面原理 ...
- 自制MVC框架基础插件介绍
本文介绍的基础插件不是实现BeforehandCommonAttribute或ProceedPlugin的postsharp插件,这些都是自定义的基础性的拦截,而且在项目中经常用到. 1). Comp ...
- Winform设计-小百货 涵盖基础插件学习（适合新手）
Winform设计-小百货 涵盖基础插件学习(适合新手) 第一次写winform,主要是为了加快对 事件的 理解. 代码如下: private void Form1_Load(object se ...
- Qt Creator 中的插件Plugin, 区分说明。。。
Qt Creator 中可以创建 三中类型的插件Plugin: 1.用的最多的,派生自QGenericPlugin类: 在新建Library, Plugin类型工程中,新建. 调用使用QPlugi ...
- UE4.5.0的Kinect插件(Plugin)<一>
声明:所有权利保留. 转载必须说明出处:http://blog.csdn.net/cartzhang/article/details/43193431 UE4 Plugin,在UE4的官网,放出了有个 ...
- linux下C++ 插件(plugin)实现技术
应用程序中使用插件技术,有利于日后的版本更新.维护(比如打补丁)和功能扩展,是一种很实用的技术.其最大的特点是更新插件时无需重新编译主程序,对于一个设计良好的应用系统而言,甚至可以做到业务功能的在线升 ...
随机推荐
- MySQL - [04] 分布式部署&主从复制&读写分离
一.前言 Q1:为什么需要主从复制? 1.在业务复杂的系统中,有一条SQL语句需要锁表,导致暂时不能使用读的服务,那么就很影响运行中的业务.使用主从复制,让主库负责写,从库负责读,这样即使主库出现了锁 ...
- vmware workstation 17 pro激活密钥
vmware workstation 17 pro激活密钥,通用批量永久激活许可 17:JU090-6039P-08409-8J0QH-2YR7F 16:ZF3R0-FHED2-M80TY-8QYGC ...
- 【FAQ】HarmonyOS SDK 闭源开放能力 —Push Kit（9）
1.问题描述: 通过push token向鸿蒙手机推送一条通知,收到通知后,通知右侧不展示图片. 解决方案: 检查一下是否存在图片风控:https://developer.huawei.com/con ...
- 使用selenium下载文件--设置下载文件自动保存文件夹
selenium自动下载文件到指定目录 本文参考:https://www.cnblogs.com/huxiaofeng1029/p/17383726.html 有时候,我们需要在网页中点击某些按钮,将 ...
- 后台返回文件URL，前端下载文件，即使设置文件名，下载的文件名称并不是自己所设置的问题
1.背景 项目中遇到这么一个问题,上传文件后,后台返回的是一个URL,前端需要通过点击下载这个文件 2.首次处理 当时一看是下载文件,觉得很简单,无非是通过创建a标签来实现,以下是我当时的代码,用的是 ...
- jupyter -- 数据分析可视化开发工具
博客地址:https://www.cnblogs.com/zylyehuo/ jupyter介绍 jupyter就是anaconda提供的一个基于浏览器的可视化开发工具 jupyter的基本使用 启动 ...
- Linux-两台Linux服务器间设置共享文件夹（NFS服务器）
一.环境信息服务器1:192.168.120.141 文件夹:/opt服务器2:192.168.120.142 文件夹:/opt将服务器1的/opt文件夹共享到服务器2的/ ...
- 【Python自动化测试环境管理】tox
1. tox基本介绍 1.1 tox是什么? tox 是一个用于管理 Python 项目的自动化测试和环境管理工具.它的主要功能是创建虚拟环境并运行项目的测试套件,tox能够让我们在同一个Host上自 ...
- 智能Agent如何改造传统工作流：从搜索到全能助手
智能Agent如何改造传统工作流:从搜索到全能助手 引言:当AI遇上工作流 还记得我们以前搜索信息的方式吗?输入关键词,浏览大量结果,筛选有用内容,再整合成我们需要的答案.这个过程不仅耗时,还常常让人 ...
- 抽象类的注意事项、abstract关键字的冲突--java进阶day02
1.注意事项 1.抽象类不允许创建对象 2.抽象类存在构造方法 3.抽象类中可以存在普通成员方法 4.抽象类的子类存在两种处理方式 第一种不多解释,主要讲第二种,子类继承了抽象类,相当于子类里面有了抽 ...