Vue中建立全局引用或者全局命令的方法


Posted in Javascript onAugust 21, 2017

如何在Vue中建立全局引用或者全局命令,具体内容如下

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

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

main.js

Vue中建立全局引用或者全局命令的方法

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

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

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

directive.js

Vue中建立全局引用或者全局命令的方法

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

main.js

Vue中建立全局引用或者全局命令的方法

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

Vue中建立全局引用或者全局命令的方法

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

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

mixins.js

Vue中建立全局引用或者全局命令的方法

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

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

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

Vue中建立全局引用或者全局命令的方法

Vue中建立全局引用或者全局命令的方法

这样就会很方便。

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

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

main.js

Vue中建立全局引用或者全局命令的方法

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

xxx.vue

Vue中建立全局引用或者全局命令的方法

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

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

main.js

Vue中建立全局引用或者全局命令的方法

xxx.vue

Vue中建立全局引用或者全局命令的方法

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
“不能执行已释放的Script代码”错误的原因及解决办法
Sep 09 Javascript
JS创建优美的页面滑动块效果 - Glider.js
Sep 27 Javascript
JS中prototype关键字的功能介绍及使用示例
Jul 21 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
Nov 23 Javascript
jquery.validate 自定义验证方法及validate相关参数
Jan 18 Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
Apr 18 Javascript
jQuery学习笔记之入门
Dec 14 Javascript
jQuery按需加载轮播图(web前端性能优化)
Feb 17 Javascript
在Vue中使用echarts的实例代码(3种图)
Jul 10 Javascript
vuejs父子组件之间数据交互详解
Aug 09 Javascript
highCharts提示框中显示当前时间的方法
Jan 18 Javascript
Vue 组件修改根实例的数据的方法
Apr 02 Javascript
JS实现身份证输入框的输入效果
Aug 21 #Javascript
Vue自定义指令使用方法详解
Aug 21 #Javascript
javascript实现Java中的Map对象功能的实例详解
Aug 21 #Javascript
Vue ElementUI之Form表单验证遇到的问题
Aug 21 #Javascript
JavaScript中各数制转换全面总结
Aug 21 #Javascript
JQuery判断正整数整理小结
Aug 21 #jQuery
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
Aug 21 #Javascript
You might like
php !function_exists("T7FC56270E7A70FA81A5935B72EACBE29"))代码解密
2011/01/07 PHP
php 指定范围内多个随机数代码实例
2016/07/18 PHP
PHP登录(ajax提交数据和后台校验)实例分享
2016/12/29 PHP
jquery autocomplete自动完成插件的的使用方法
2010/08/07 Javascript
鼠标选择动态改变网页背景颜色的JS代码
2013/12/10 Javascript
简介JavaScript中search()方法的使用
2015/06/06 Javascript
ajax级联菜单实现方法实例分析
2016/11/28 Javascript
jQuery日期范围选择器附源码下载
2017/05/23 jQuery
详解vue移动端项目的适配(以mint-ui为例)
2018/08/17 Javascript
JS使用Date对象实时显示当前系统时间简单示例
2018/08/23 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
2019/02/17 Javascript
NodeJs之word文件生成与解析的实现代码
2019/04/01 NodeJs
JS实现简单省市二级联动
2019/11/27 Javascript
详解Vue的watch中的immediate与watch是什么意思
2019/12/30 Javascript
Vue如何基于vue-i18n实现多国语言兼容
2020/07/17 Javascript
python制作企业邮箱的爆破脚本
2016/10/05 Python
python实现输入数字的连续加减方法
2018/06/22 Python
用Python实现读写锁的示例代码
2018/11/05 Python
Python使用sqlalchemy模块连接数据库操作示例
2019/03/13 Python
opencv python Canny边缘提取实现过程解析
2020/02/03 Python
Django 项目布局方法(值得推荐)
2020/03/22 Python
Pytorch 扩展Tensor维度、压缩Tensor维度的方法
2020/09/09 Python
Python中用xlwt制作表格实例讲解
2020/11/05 Python
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
2013/01/09 HTML / CSS
摩顿布朗英国官方网上商店:奢华沐浴、身体和头发护理
2016/10/29 全球购物
Dune London官网:英国著名奢华鞋履品牌
2017/11/30 全球购物
《那片绿绿的爬山虎》教学反思
2014/02/27 职场文书
经典广告词大全
2014/03/14 职场文书
养牛场项目建议书
2014/05/13 职场文书
软件测试专业推荐信
2014/09/18 职场文书
项目经理岗位职责
2015/01/31 职场文书
python批量更改目录名/文件名的方法
2021/04/18 Python
如何自己动手写SQL执行引擎
2021/06/02 MySQL
redis不能访问本机真实ip地址的解决方案
2021/07/07 Redis
Nginx静态压缩和代码压缩提高访问速度详解
2022/05/30 Servers
windows11选中自动复制怎么开启? Win11自动复制所选内容的方法
2022/07/23 数码科技