插件

您所在的位置:网站首页 插件的正确方法 插件

插件

2024-07-13 23:42:13| 来源: 网络整理| 查看: 265

插件 ​介绍 ​

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

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

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

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

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

通过 app.component() 和 app.directive() 注册一到多个全局组件或自定义指令。

通过 app.provide() 使一个资源可被注入进整个应用。

向 app.config.globalProperties 中添加一些全局实例属性或方法

一个可能上述三种都包含了的功能库 (例如 vue-router)。

编写一个插件 ​

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

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

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

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

template{{ $translate('greetings.hello') }}

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

js// 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() 的额外参数被传入:

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

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

TypeScript 用户请参考:扩展全局属性

TIP

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

插件中的 Provide / Inject ​

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

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

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

vue import { inject } from 'vue' const i18n = inject('i18n') console.log(i18n.greetings.hello) jsexport default { inject: ['i18n'], created() { console.log(this.i18n.greetings.hello) } }


【本文地址】

公司简介

联系我们

今日新闻


点击排行

实验室常用的仪器、试剂和
说到实验室常用到的东西,主要就分为仪器、试剂和耗
不用再找了,全球10大实验
01、赛默飞世尔科技(热电)Thermo Fisher Scientif
三代水柜的量产巅峰T-72坦
作者:寞寒最近,西边闹腾挺大,本来小寞以为忙完这
通风柜跟实验室通风系统有
说到通风柜跟实验室通风,不少人都纠结二者到底是不
集消毒杀菌、烘干收纳为一
厨房是家里细菌较多的地方,潮湿的环境、没有完全密
实验室设备之全钢实验台如
全钢实验台是实验室家具中较为重要的家具之一,很多

推荐新闻


图片新闻

实验室药品柜的特性有哪些
实验室药品柜是实验室家具的重要组成部分之一,主要
小学科学实验中有哪些教学
计算机 计算器 一般 打孔器 打气筒 仪器车 显微镜
实验室各种仪器原理动图讲
1.紫外分光光谱UV分析原理:吸收紫外光能量,引起分
高中化学常见仪器及实验装
1、可加热仪器:2、计量仪器:(1)仪器A的名称:量
微生物操作主要设备和器具
今天盘点一下微生物操作主要设备和器具,别嫌我啰嗦
浅谈通风柜使用基本常识
 众所周知,通风柜功能中最主要的就是排气功能。在

专题文章

    CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭