20 VUE学习:插件

news/2024/7/21 23:49:39/文章来源:https://blog.csdn.net/sixpp/article/details/139300179

介绍

在这里插入图片描述

插件 (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.luyixian.cn/news_show_1054710.aspx

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

相关文章

MATLAB分类与判别模型算法:基于模糊神经网络的嘉陵江水质评价【含Matlab源码 MX_004期】

算法思路介绍&#xff1a; 基于模糊神经网络的水质预测系统&#xff0c;整体思路分为以下几个模块&#xff1a; 1. 数据准备模块 加载数据&#xff1a;从文件中加载训练和测试数据&#xff0c;包括输入数据和输出数据。数据归一化&#xff1a;对加载的数据进行归一化处理&am…

一行代码实现UI拖拽的效果

演示 先来看效果吧&#xff01; 实现方式 1.首先创建一个你想拖动的UI图片 2.创建一个C#的脚本 3.编写控制脚本&#xff08;代码按我的敲就行&#xff09; 付上代码片段 public void OnDrag(PointerEventData eventData){transform.position eventData.position;} 4.添加脚…

【Java SE】 String、StringBuff和StringBuilder

&#x1f970;&#x1f970;&#x1f970;来都来了&#xff0c;不妨点个关注叭&#xff01; &#x1f449;博客主页&#xff1a;欢迎各位大佬!&#x1f448; 文章目录 1. 字符串不可变性1.1 设计不可变1.2 修改字符串创建新对象1.3 为什么字符串不可变1.4 String类设计不可变的…

GPT-4o:引领人工智能新时代的强大引擎

前言 GPT-4o的推出&#xff0c;让我们再次感受到了人工智能技术的魅力。它不仅在技术上取得了显著突破&#xff0c;还为我们带来了广泛的应用前景。下面&#xff0c;我将从几个方面来谈谈GPT-4o的魅力。 一、技术突破&#xff0c;令人惊叹 1. 多模态处理能力的飞跃&#xff…

Java Object类方法介绍

Object作为顶级类&#xff0c;所有的类都实现了该类的方法&#xff0c;包括数组。 查询Java文档&#xff1a; 1、object.eauqls(): 其作用与 有些类似。 &#xff1a; 是一个比较运算符&#xff0c;而不是一个方法。 ①可以判断基本类型&#xff0c;也可以判断引用类型。 ②若…

基于深度学习的中文情感分析系统python flask

基于python的毕业设计 基于深度学习的中文情感分析系统(flask)(源码说明文档演示) 毕业设计课程设计期末大作业、课程设计、高分必看&#xff0c;下载下来&#xff0c;简单部署&#xff0c;就可以使用。 包含&#xff1a;项目源码、数据库脚本、软件工具等&#xff0c;该项目…

Mysql 找出未提交事务的SQL及死锁

未提交事务&#xff1a; 通过查看information_schema.INNODB_TRX视图,您可以了解当前系统中正在运行的事务情况,从而进行问题排查和性能优化。 SELECT * FROM information_schema.innodb_trx; 通过trx_state为RUNNIG,trx_started判断是否有一直RUNNING的事务。 如果有未提交…

SelfKG论文翻译

SelfKG: Self-Supervised Entity Alignment in Knowledge Graphs SelfKG&#xff1a;知识图中的自监督实体对齐 ABSTRACT 实体对齐旨在识别不同知识图谱&#xff08;KG&#xff09;中的等效实体&#xff0c;是构建网络规模知识图谱的基本问题。在其发展过程中&#xff0c;标…

关于 Spring 是什么

Spring 是什么 我们通常所说的 Spring 指的是 Spring Framework&#xff08;Spring 框架&#xff09;&#xff0c;它是⼀个开源框架&#xff0c;有着活跃⽽庞⼤的社区&#xff0c;这就是它之所以能⻓久不衰的原因。Spring ⽀持⼴泛的应⽤场景&#xff0c;它可以让 Java 企业级的…

如何在 Elasticsearch 中选择精确 kNN 搜索和近似 kNN 搜索

作者&#xff1a;来自 Elastic Carlos Delgado kNN 是什么&#xff1f; 语义搜索&#xff08;semantic search&#xff09;是相关性排名的强大工具。 它使你不仅可以使用关键字&#xff0c;还可以考虑文档和查询的实际含义。 语义搜索基于向量搜索&#xff08;vector search&…

配置旁挂二层组网直接转发示例(命令行)

业务需求 企业用户通过WLAN接入网络&#xff0c;以满足移动办公的最基本需求。且在覆盖区域内移动发生漫游时&#xff0c;不影响用户的业务使用。 组网需求 AC组网方式&#xff1a;旁挂二层组网。DHCP部署方式&#xff1a; AC作为DHCP服务器为AP分配IP地址。汇聚交换机SwitchB作…

c++(六)

c&#xff08;六&#xff09; 多态概念在c中是如何实现多态静态多态&#xff08;绑定&#xff09;动态多态&#xff08;绑定&#xff09; 动态多态的实现原理动态内存分配中遇到的问题 重载、重定义、重写的区别抽象类接口类---抽象类空类对象的内存大小explicitfinal修饰类修饰…

java调用远程接口下载文件

在postman中这样下载文件 有时下载文件太大postman会闪退&#xff0c;可以通过代码下载&#xff0c;使用hutool的http包

端口扫描利器--nmap

目录 普通扫描 几种指定目标的方法 TCP/UDP扫描 端口服务扫描 综合扫描 普通扫描 基于端口连接并响应(真实) ​ nmap -sn 网段(0/24)-sn 几种指定目标的方法 单个IP扫描 IP范围扫描 扫描文件里的IP 扫描网段,(排除某IP) 扫描网段(排除某清单IP) TCP/UDP扫描 -sS …

MoE模型大火,源2.0-M32诠释“三个臭皮匠,顶个诸葛亮”!

文 | 智能相对论 作者 | 陈泊丞 近半年来&#xff0c;MoE混合专家大模型彻底是火了。 在海外&#xff0c;OpenAI的GPT-4、谷歌的Gemini、Mistral AI的Mistral、xAI的Grok-1等主流大模型都采用了MoE架构。而在国内&#xff0c;浪潮信息也刚刚发布了基于MoE架构的“源2.0-M3…

vue3的核心API功能:computed()API使用

常规使用方法: 这样是常规使用方法. 另一种,可写计算属性的使用方法: 这样分别定义computed的get回调函数和set回调函数, 上面例子定义了plusOne.value的值为1, 那么这时候就走了computed的set回调函数,而没有走get回调函数. 当我们打印plusOne.value的值的时候,走的是get的…

基于 Solana 的 Drift Protocol 快速崛起,重新定义去中心化衍生品市场

随着区块链技术的快速发展&#xff0c;加密市场的格局正在悄然改变。投资者对透明度、效率和去中心化的需求愈发强烈&#xff0c;之前完全由中心化交易主导的加密货币交易&#xff0c;开始向链上转移。 根据 Coingecko 的最新数据&#xff0c;CEX 和 DEX 的现货交易量已经达到了…

VBA技术资料MF159:实现某个区域内的数据滚动

我给VBA的定义&#xff1a;VBA是个人小型自动化处理的有效工具。利用好了&#xff0c;可以大大提高自己的工作效率&#xff0c;而且可以提高数据的准确度。“VBA语言専攻”提供的教程一共九套&#xff0c;分为初级、中级、高级三大部分&#xff0c;教程是对VBA的系统讲解&#…

python双色球选号程序的实现与解析

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、引言&#xff1a;双色球选号游戏的魅力 二、程序设计与实现 1. 生成红色球号码 2. 生…

1794 jsp蛋糕店管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 jsp 蛋糕店管理系统 是一套完善的web设计系统&#xff0c;对理解JSP java编程开发语言有帮助采用了java设计&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统采用web模式&#xff0c;系统主要采用B/S模式开发。开发环境为TOMCAT7.0,Myeclipse8.5开发&…