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)实现技术
应用程序中使用插件技术,有利于日后的版本更新.维护(比如打补丁)和功能扩展,是一种很实用的技术.其最大的特点是更新插件时无需重新编译主程序,对于一个设计良好的应用系统而言,甚至可以做到业务功能的在线升 ...
随机推荐
- Dev Express WPF GridControl 数据导出到Excel
Dev Express WPF 给控件提供了公共的导出方法: Export to PDF Export to HTML Export to MHT Export to Text Export to C ...
- DispatcherPriority 枚举
DispatcherPriority 枚举 ApplicationIdle 2 枚举值为 2. 在应用程序空闲时处理操作. Background 4 枚举值为 4. 在完成所有其他非空闲操作后处理操作 ...
- 牛客题解 | 单组_A+B
题目 题目链接 解题思路 输入两个数字,输出它们的和. 代码 #include <iostream> using namespace std; int main(void) { ios:: ...
- [SCOI2016] 幸运数字 题解
\(xor\) 最大值想到线性基,路径想到 \(lca\) 和树链剖分,由于没有修改用 \(lca\) 就可以.先用处理 \(fa\) 数组的方式处理倍增线性基(自然是得用线性基合并的),在求 \(l ...
- SM系列国密算法
其中SM1.SM4.SM7.祖冲之密码(ZUC)是对称算法:SM2.SM9是非对称算法:SM3是哈希算法.目前,这些算法已广泛应用于各个领域中,期待有一天会有采用国密算法的区块链应用出现. 一.SM1 ...
- 一段VUE代码：通过组件封装全局方法、自定义指令和注册组件
index.js // 插件定义第一种方式,对象:拥有 install() 方法的对象 const myPlugin = { install(app, options) { // 配置全局方法 app ...
- 变量命名不规范&我被deepseek骗了
首先是一个实体类 @Data public class Dto {private String mNumber; } 前端传来{"mNumber:"123"}为null的 ...
- 异步编程——CompletableFuture详解
Future JDK5 新增了Future接口,用于描述一个异步计算的结果. 虽然 Future 以及相关使用方法提供了异步执行任务的能力,但是对于结果的获取却是很不方便,我们必须使用Future.g ...
- 【ABAQUS模态动力学】Composite&abaqus 预应力模态分析&输出单元刚度矩阵
参考 连接器振动脱落_abaqus重启动分析_显式隐式切换_插拔力预应力模态_TeeSim天深科技 Abaqus预应力模态分析 附Abaqus 分析用户手册材料卷下载- 技术邻 Natural fre ...
- ModuleNotFoundError: No module named '_sqlite3' when Python3
前言 运行 python 报错:ModuleNotFoundError: No module named '_sqlite3' 解决 重新编译安装 python ./configure --enabl ...