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)实现技术
应用程序中使用插件技术,有利于日后的版本更新.维护(比如打补丁)和功能扩展,是一种很实用的技术.其最大的特点是更新插件时无需重新编译主程序,对于一个设计良好的应用系统而言,甚至可以做到业务功能的在线升 ...
随机推荐
- 重磅发布！DeepSeek 微调秘籍揭秘，一键解锁升级版全家桶，AI 玩家必备神器！
DeepSeek V3/R1 火爆全网,基于原始模型的解决方案和 API 服务已随处可见,陷入低价和免费内卷. 如何站在巨人肩膀上,通过后训练(post-training)结合专业领域数据,低成本打造 ...
- Python if分支
分支语句: 1.单分支语句 1 if 条件表达式: 2 print("如果成立怎么养怎么样") 例:让用户输入年龄,如果大于18就可以去网吧偷耳机age = int(input(& ...
- Ansible - [06] Playbook
Playbook 概述 Ansible ad-hoc 可以通过命令行形式远程管理其他主机 适合执行一些临时性简单任务 Ansible playbook 中文名称叫 剧本 将经常需要执行的任务写入一个文 ...
- 制作ubuntu22.04的根文件系统
amd64 点击查看代码 制作Ubuntu 22.04的根文件系统涉及到几个关键步骤.以下是详细的步骤说明,包括创建目录结构.安装基本软件包以及配置系统. ### 步骤1:准备环境 首先,确保你的开发 ...
- Java多线程运行探幽
事关Training2中Task4,想看看经典的两个进程并行会是什么样子 题目概述 实现简单的生产者-消费者模型: Tray托盘容量为1:托盘满时不能放入,空时不能取货 Producer生产者共需生产 ...
- [tldr] 配置windows terminal使用git bash
windows terminal默认使用power shell作为shell,但是power shell不好用,还是习惯linux的命令行行为. 参考Windows Terminal 配置 Git B ...
- 学习高可靠Redis分布式锁实现思路
一.分布式锁的必要性 在单体应用时代,我们使用ReentrantLock或synchronized就能解决线程安全问题.但当系统拆分为分布式架构后(目前大多数公司应该不会只是单体应用了),跨进程的共享 ...
- Golang 入门 : 包名与导入路径
math/rand包有一个Intn函数,可以生成一个随机数,所以我们需要导入math/rand.然后调用rand.Intn生成随机数. 等一下!Intn来自math/rand包,那为什么我们调用包的时 ...
- HTTP/1.1 优化
避免发送 HTTP 请求 对于一些具有重复性的 HTTP 请求,比如每次请求得到的数据都一样的,我们可以把这对「请求-响应」的数据都缓存在本地,通过缓存技术减少请求次数. 客户端会把第一次请求以及响应 ...
- 如何利用 PostgreSQL 的 JSONB API 作为扩展的轻量级 JSON 解析器
前言 在基于 C 语言的 PostgreSQL 扩展开发中,您可能会遇到需要处理 JSON 等结构化数据的情况.通常,您可能会在扩展中引入第三方 JSON 解析库,例如 cJSON 或 libjans ...