20 VUE学习:插件

介绍

在这里插入图片描述

插件 (Plugins) 是一种能为 Vue 添加全局功能的工具代码。下面是如何安装一个插件的示例:

import { createApp } from 'vue'const app = createApp({})app.use(myPlugin, {/* 可选的选项 */
})

一个插件可以是一个拥有 install() 方法的对象,也可以直接是一个安装函数本身。安装函数会接收到安装它的[应用实例]和传递给 app.use() 的额外选项作为参数:

const myPlugin = {install(app, options) {// 配置此应用}
}

插件没有严格定义的使用范围,但是插件发挥作用的常见场景主要包括以下几种:

  1. 通过 [app.component()]和 [app.directive()]注册一到多个全局组件或自定义指令。
  2. 通过 [app.provide()]使一个资源[可被注入]进整个应用。
  3. 向 [app.config.globalProperties]中添加一些全局实例属性或方法
  4. 一个可能上述三种都包含了的功能库 (例如 [vue-router])。

编写一个插件

在这里插入图片描述

为了更好地理解如何构建 Vue.js 插件,我们可以试着写一个简单的 i18n ([国际化 (Internationalization)] 的缩写) 插件。

让我们从设置插件对象开始。建议在一个单独的文件中创建并导出它,以保证更好地管理逻辑,如下所示:

// plugins/i18n.js
export default {install: (app, options) => {// 在这里编写插件代码}
}

我们希望有一个翻译函数,这个函数接收一个以 . 作为分隔符的 key 字符串,用来在用户提供的翻译字典中查找对应语言的文本。期望的使用方式如下:

<h1>{{ $translate('greetings.hello') }}</h1>

这个函数应当能够在任意模板中被全局调用。这一点可以通过在插件中将它添加到 app.config.globalProperties 上来实现:

// plugins/i18n.js
export default {install: (app, options) => {// 注入一个全局可用的 $translate() 方法app.config.globalProperties.$translate = (key) => {// 获取 `options` 对象的深层属性// 使用 `key` 作为索引return key.split('.').reduce((o, i) => {if (o) return o[i]}, options)}}
}

我们的 $translate 函数会接收一个例如 greetings.hello 的字符串,在用户提供的翻译字典中查找,并返回翻译得到的值。

用于查找的翻译字典对象则应当在插件被安装时作为 app.use() 的额外参数被传入:

import i18nPlugin from './plugins/i18n'app.use(i18nPlugin, {greetings: {hello: 'Bonjour!'}
})

这样,我们一开始的表达式 $translate('greetings.hello') 就会在运行时被替换为 Bonjour! 了。

请谨慎使用全局属性,如果在整个应用中使用不同插件注入的太多全局属性,很容易让应用变得难以理解和维护。

插件中的 Provide / Inject

在插件中,我们可以通过 provide 来为插件用户供给一些内容。举例来说,我们可以将插件接收到的 options 参数提供给整个应用,让任何组件都能使用这个翻译字典对象。

// plugins/i18n.js
export default {install: (app, options) => {app.provide('i18n', options)}
}

现在,插件用户就可以在他们的组件中以 i18n 为 key 注入并访问插件的选项对象了。

<script setup>
import { inject } from 'vue'const i18n = inject('i18n')console.log(i18n.greetings.hello)
</script>

插件和组件傻傻分不清楚

Vue插件和组件是Vue.js框架中的两个重要概念,它们在功能和使用方式上有一些区别和联系。

区别:

  1. 定义和用途

    • 组件:组件是Vue应用中的基本构建块,用于构建用户界面。一个组件封装了HTML、CSS和JavaScript,可以在应用中重复使用。组件通常用于构建UI的某个部分,比如按钮、表单、列表等。
    • 插件:插件则是用来增强Vue本身的功能。插件可以是一个库,提供全局的功能,如添加全局方法或属性、添加实例方法、使用mixin、添加全局资源(如指令、过滤器、过渡等)、提供Vue实例的生命周期钩子等。
  2. 使用范围

    • 组件:组件通常是局部的,它们在特定的Vue实例或组件中注册和使用。
    • 插件:插件通常是全局的,一旦安装,它的功能就可以在整个应用中使用。
  3. 注册方式

    • 组件:组件可以通过Vue.component()全局注册,也可以在组件的components选项中局部注册。
    • 插件:插件需要使用Vue.use()方法来安装,这个方法会调用插件的install方法,并传入Vue构造函数。

联系:

  1. 复用性

    • 组件和插件都是为了提高代码的复用性。组件通过封装UI元素来复用界面,而插件通过封装功能来复用逻辑。
  2. 扩展性

    • 组件和插件都可以用来扩展Vue应用的功能。组件扩展UI,插件扩展Vue本身的功能。
  3. 依赖管理

    • 组件和插件都可以依赖其他模块或库,并通过合适的依赖管理方式(如npm)来引入这些依赖。
  4. 生命周期

    • 组件和插件都可以利用Vue的生命周期钩子来执行特定的逻辑,如在组件创建、更新或销毁时执行代码。

总结来说,组件主要用于构建用户界面,而插件用于增强Vue本身的功能。它们都是Vue生态系统中重要的组成部分,通过不同的方式来提高代码的复用性和可维护性。

关注我,不迷路,共学习,同进步

关注我,不迷路,共学习,同进步

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/338772.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

计算一个3x3矩阵对角线和其它两条线的元素之和

计算一个3x3矩阵对角线和其它两条线的元素之和 #include <stdio.h> int main () { int d0,b0,s,i,j; int a[3][3]{1,2,3,4,5,6,7,8,9}; for(i0,j2;i<3;i,j--) dda[i][i]a[i][j]; for(i0,j0;i<3;) {bba[i][j]a[i][j2]; ii2;} sdb; printf("d%d\nb%d\ns%d\n&qu…

支付宝支付(沙盒支付)

后端页面代码 Controller RequestMapping("/pay") public class PayController {private String orderId;Autowiredprivate OrdersService ordersService;Value("${appId}")private String appId;Value("${privateKey}")private String private…

ReDos攻击浅析

DOS为拒绝服务攻击&#xff0c;re则是由于正则表达式使用不当&#xff0c;陷入正则引擎的回溯陷阱导致服务崩溃&#xff0c;大量消耗后台性能 正则 ​ 探讨redos攻击之前&#xff0c;首先了解下正则的一些知识 执行过程 大体的执行过程分为: 编译 -> 执行编译过程中&…

牛客热题:缺失的第一个正整数

牛客热题&#xff1a;数组中出现一次的两个数字> &#x1f4df;作者主页&#xff1a;慢热的陕西人 &#x1f334;专栏链接&#xff1a;力扣刷题日记 &#x1f4e3;欢迎各位大佬&#x1f44d;点赞&#x1f525;关注&#x1f693;收藏&#xff0c;&#x1f349;留言 文章目录 …

SPWM载波调制方式-三电平杂记1

方法一&#xff1a; P2 O1 N0 方法二&#xff1a;双载波直接发波 方法三&#xff1a;负轴载波和调制波往上抬升1&#xff0c;得到使用同一个载波 在正半周在P和O切换&#xff0c;在下半轴式O和N切换

出现 Transaction rolled back because it has been marked as rollback-only 解决方法

目录 1. 问题所示2. 原理分析3. 解决方法1. 问题所示 用户反馈的Bug如下所示: Transaction rolled back because it has been marked as rollback-only截图如下: 浏览器终端同样显示: 2. 原理分析 错误表明,在事务的生命周期内,遇到了某个异常或条件,导致该事务被标记…

四川古力未来科技抖音小店安全靠谱,购物新体验

在数字化浪潮席卷而来的今天&#xff0c;电商行业蓬勃发展&#xff0c;各种线上购物平台如雨后春笋般涌现。其中&#xff0c;抖音小店凭借其独特的短视频直播购物模式&#xff0c;迅速赢得了广大消费者的青睐。而四川古力未来科技抖音小店&#xff0c;更是以其安全靠谱、品质保…

注解的妙用

一、注解是什么&#xff1f; 在Java中&#xff0c;注解&#xff08;Annotation&#xff09;是一种用于在代码中插入元数据的方式。注解不直接影响程序代码的行为&#xff0c;而是提供了一种形式化的方法来说明代码的某些方面&#xff0c;供编译器、开发工具或运行时环境等使用…

Vue+AntDesignVue实现a-tree树形组件的层级选中功能

文章目录 一、构建树形组件二、js代码实现 最近碰到了一个新需求&#xff0c;使用树形选择器实现角色管理功能&#xff0c;当用户选中一个节点时&#xff0c;其所有子节点都会被自动选中&#xff1b;同样&#xff0c;当用户取消选中一个节点时&#xff0c;其所有子节点也会被取…

LNMP部署及应用

目录 1.LNMP概述 Nginx 特点 Nginx 作用 2.分布式部署LNMP操练 Nginx主机&#xff1a;CentOS 7-1 PHP主机: CentOS 7-2 1.LNMP概述 Nginx 是开源、高性能、高可靠的 Web 和反向代理服务器&#xff0c;而且支持热部署&#xff0c;几乎可以做到 7 * 24 小时不间断运行&…

Java实战:文本文件复制

任务目标 本实战任务的目标是创建一个Java程序&#xff0c;用于复制指定的文本文件到另一个位置&#xff0c;并在控制台中显示复制结果。 任务步骤 创建源文件&#xff1a;在指定的路径D:\love.txt创建源文件。创建文件复制类&#xff1a;在net.huawei.student.test包中创建…

绿联 安装memcached容器 - 一个开源的高性能分布式内存对象缓存系统

绿联 安装memcached容器 - 一个开源的高性能分布式内存对象缓存系统 1、镜像 memcached:latest 2、安装 2.1、基础设置 重启策略&#xff1a;容器退出时总是重启容器。 2.2、网络 网络选择桥接(bridge)。 2.3、端口设置 容器端口11211固定不变&#xff0c;本地端口若未被…

即时通讯视频会议平台,WorkPlus本地化部署解决方案

随着现代科技的快速发展&#xff0c;传统的会议方式已经不再满足企业和组织的需求。即时通讯视频会议以其便利性和高效性&#xff0c;成为了现代企业沟通和协作的重要工具。通过即时通讯视频会议&#xff0c;企业可以实现无时差的交流和远程协作&#xff0c;增强团队合作和提高…

计算机系统结构之虚拟存储器

虚拟存储器通过增设地址映像表机构来实现程序在主存中的定位。 一、段式管理 (1)段式管理的基本思想是把程序按内容或过程函数关系分成段&#xff0c;每段有自己的名字。一个用户作业或进程所包含的段对应一个二维线性虚拟空间&#xff08;二维虚拟存储器&#xff09;。段式管…

springboot实现文件上传功能,整合云服务

文章目录 这是springboot案例的,文件上传功能的拆分,本篇将带大家彻底了解文件上传功能,先从本地存储再到云存储,全网最详细版本,保证可以学会,可以了解文件上传功能的开发文件上传功能剖析进行书写一个小的文件上传文件上传的文件三要素首先表单提交的方式要是 post方式,第二个…

如何从Windows的硬盘中恢复丢失或删除的照片

你有没有不小心删除了一张你再也找不回来的重要照片&#xff1f;如果是您的公司或家庭照片、婚礼或童年回忆&#xff0c;或亲人的照片怎么办&#xff1f; 根据我们的经验&#xff0c;用户通常会在清理计算机的存储/速度时遇到这样的事故&#xff0c;并最终删除包含重要图片的文…

pytorch学习笔记5

transform 本质上作用是将图片通过transform这个这个工具箱获取想要的结果 tensor就是一个包含神经网络需要的一些理论基础的参数 from torch.utils.tensorboard import SummaryWriter from torchvision import transforms from PIL import Image #tensor数据类型 #通过tra…

最新h5st(4.7.2)参数分析与纯算法还原(含算法源码)

文章目录 1. 写在前面2. 加密分析3. 算法还原 【&#x1f3e0;作者主页】&#xff1a;吴秋霖 【&#x1f4bc;作者介绍】&#xff1a;擅长爬虫与JS加密逆向分析&#xff01;Python领域优质创作者、CSDN博客专家、阿里云博客专家、华为云享专家。一路走来长期坚守并致力于Python…

22 、系统安全

新的服务器到手&#xff0c;部署服务器初始化。 1、配置ip地址 网关dns解析&#xff08;static&#xff09;内网和外网。 2、安装源&#xff0c;外网&#xff08;在线即可&#xff09;&#xff0c;内网&#xff08;只能用源码包编译安装&#xff09;。 3、磁盘分区&#xff…

k8s 1.28.x 配置nfs

1.安装nfs&#xff0c;在每个节点上安装 yum install -y nfs-utils 2.创建共享目录(主节点上操作) mkdir -p /opt/nfs/k8s 3.编写NFS的共享配置 /opt/nfs/k8s *(rw,no_root_squash) #*代表对所有IP都开放此目录&#xff0c;rw是读写 4.启动nfs systemctl enable nfs-ser…