如何在vue中建立全局引用或者全局命令

萧了个晓 萧了个晓     2022-08-24     112

关键词:

1 一般在vue中,有很多vue组件,这些组件每个都是一个文件。都可能需要引用到相同模块(或者插件)。我们不想每个文件都import 一次模块。

如果是基于vue.js编写的插件我们可以用 Vue.use(...)

main.js

 

 2 但是如果想添加一个全局命令,同时又让每个vue的文件都能用到怎么办?

第一步:最好建立一个全局的命令文件例如:directive/directive.js

第二步:利用Vue.directive()建立一个全局命令,并将它暴露出来,例如一个focus 让表单自动聚焦

directive.js

 

第三部步:在main.js(入口JS文件)中将它引入,可以省略文件后缀

main.js

这样任何一个Vue文件只要这样v-focus(命令名),就可以很方便的用到了

 

3  Vue.directive() 的命令一般都是自动运行的或者说初始化等等触发的,并不能用于异步事件,怎么办?

于是我们可以用到'mixins'混合命令,你最好建立一个专门的文件夹用于存放混合命令,例如:

mixins.js

比如 saveScrollPosition (不是vue中的saveScrollPosition)可以每次在路由跳转之间保存住浏览位置信息

注意:vue2.0 中 路由跳转之间会自动保存位置信息 但是有Bug(位置信息之间会相互干扰)。

 所以我们从新写一个saveScrollPosition暴露出去后,在你需要的页面中混入

这样就会很方便。

 

4 如果你需要应用一个插件,同时他并不是基于vue.js的插件命令编写的,那你可以将它赋予Vue的原型上

例如:我想全局引用axios,我们可以这样

main.js

然后this.$http.get(url) 等等

xxx.vue

5 将需要的变量挂在到window对象上

例如:第三方库Lodash.js,moment.js等等

main.js

xxx.vue

注意:这种方式不适合服务端渲染,服务端并没有window对象

 

强调一点:以上所有的引入都必须通过入口JS文件去引入,这样才能适用于全局

vue中创建全局单文件组件/命令

...文件:如directive/directive.js  第二部:利用Vue.directive()建立一个全局命令,并将它暴露出来,例如一个focus让表单自动聚焦:‘directive.js  第三步:在m 查看详情

在vue项目中如何定义全局变量全局函数(代码片段)

如题,在项目中,经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的:用户的登录token,用户的地址信息等,这时候就需要设置一波全局变量和全局函数定义全局变量原理:设置一个专用的的全局变量模块文... 查看详情

在vue项目中如何定义全局变量全局函数(代码片段)

如题,在项目中,经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的:用户的登录token,用户的地址信息等,这时候就需要设置一波全局变量和全局函数定义全局变量原理:设置一个专用的的全局变量模块文... 查看详情

在vue项目中如何定义全局变量全局函数(代码片段)

写在前面:如题,在项目中,经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的:用户的登录token,用户的地址信息等,这时候就需要设置一波全局变量和全局函数,这两个设置不太难,而且有一些共通之处... 查看详情

2022-03-03vue3中使用全局变量

参考技术A对比:在vue2.x中我们挂载全局变量或方法是通过是使用Vue.prototype.$api=xxx的形式来挂载,然后通过this.$xxx来获取挂载到全局的变量或者方法但是在vue3.x中显然是不行滴,在setup里面我们都获取不到this,但是别怕vue3.x官网... 查看详情

如何在 Storybook 中注册全局 Vue 组件?

】如何在Storybook中注册全局Vue组件?【英文标题】:HowtoregisterglobalVuecomponentsinStorybook?【发布时间】:2021-04-2817:34:33【问题描述】:有没有办法在Storybook中注册全局Vue组件,使其与Vue-CLI中全局注册的Vue组件兼容?【问题讨论】:... 查看详情

vue中less文件全局引用(代码片段)

...ss-resources-loader‘,4options:5resources:path.resolve(__dirname,‘需要全局引入的less的位置及文件名‘)678) 3、如果不止一个文件,就在后面继续使用concat拼接 查看详情

如何在 Vue-CLI 3 项目中全局声明 jQuery?

】如何在Vue-CLI3项目中全局声明jQuery?【英文标题】:HowdoIgloballydeclarejQueryinsideaVue-CLI3project?【发布时间】:2019-05-2022:47:58【问题描述】:我在SO和其他地方看到了很多关于此的问题,但到目前为止我没有运气。就上下文而言,我... 查看详情

vue定义全局变量在一个组件内引用

第一步:  第二步:  第三步:    ok!!完了,当然了,你也可以在main.js里面全局引用,然后用原型链挂在vue上面,用this的方法去获取!!  查看详情

如何在 vscode 中全局引用 *.d.ts

】如何在vscode中全局引用*.d.ts【英文标题】:Howtoreference*.d.tsinvscodeglobally【发布时间】:2017-09-2014:56:29【问题描述】:要在jasmine等框架的vscode中启用智能感知,我们需要在每个打字稿文件的顶部显式引用打字文件,如下所示://... 查看详情

如何在 Vue 中使用全局函数?

】如何在Vue中使用全局函数?【英文标题】:HowcanIuseglobalfunctionsinVue?【发布时间】:2021-05-1500:40:51【问题描述】:我有一个日期格式化功能。现在我需要在不同的组件中使用这个方法。这种情况的最佳做法是什么?指示?过滤... 查看详情

如何在全局 vue 组件中调用方法?

】如何在全局vue组件中调用方法?【英文标题】:HowcanIcallmethodinglobalvuecomponent?【发布时间】:2017-12-1900:37:39【问题描述】:我有根vue组件app.js:...constapp=newVue(el:\'#app\',...methods:modalShow:function(target,id=null,message=null)...,...);我有一... 查看详情

如何在 C 中引用与全局变量同名的局部变量? [复制]

】如何在C中引用与全局变量同名的局部变量?[复制]【英文标题】:howrefertoalocalvariablesharesamenameofaglobalvariableinC?[duplicate]【发布时间】:2011-08-1504:59:48【问题描述】:例如#include<stdio.h>intfoo=100;intbar()intfoo;/*localfoo=globalfoo,howto... 查看详情

vue/cli4.4.0中如何全局使用jquery?

...ue/cli4.4.0生成的项目里面看不到这个文件夹.因此具体应该如何全局使用?我是用vueui命令打开图形化界面,生成的项目.目前在依赖里面已经安装了jquery.但是怎么全局引入?却陷入困境.我尝试在main.js中加了一条代码:'import$from'jq... 查看详情

javascript如何在vue中全局注册组件?(代码片段)

查看详情

如何在 JEST 测试中模拟全局 Vue.js 变量

】如何在JEST测试中模拟全局Vue.js变量【英文标题】:HowtomockglobalVue.jsvariableinJESTtest【发布时间】:2018-12-1507:30:26【问题描述】:我的应用网址有一个全局属性/变量:Vue.prototype.$apiUrls=root:\'http://localhost:8080/\',api:\'api/v1/\'//etc.我在... 查看详情

如何在 vue 组件中重用全局 javascript 文件

】如何在vue组件中重用全局javascript文件【英文标题】:Howtoreuseaglobaljavascriptfilewithinavuecomponent【发布时间】:2017-05-2411:21:31【问题描述】:我有一个从lang.min.js创建的Lang对象:https://github.com/rmariuzzo/Lang.js在我的Laravel应用程序中... 查看详情

使用vue-cli开发过程中如何把jquery设置为全局

...尔也会需要操作DOM,偶尔也会用到JQ插件,下面简单说下如何在使用vue-cli开发时候把JQ设置为全局的公用方法。步骤:1、npminstalljquery-S此时package.json内会自动添加一个最新版本的jquery,如果需要指定版本,安装的时候自己指定。... 查看详情