Vue中建立全局引用或者全局命令的方法
如何在Vue中建立全局引用或者全局命令，具体内容如下
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文件去引入，这样才能适用于全局
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
vue3+vite使用环境变量.env的一些配置情况详细说明
开发中经常会使用环境变量,Vite相比于Webpack也有一定的变化,下面这篇文章主要给大家介绍了关于vue3+vite使用环境变量.env的一些配置情况说明的相关资料,需要的朋友可以参考下2022-12-12
在浏览器中,Vue3编辑器自带默认右键菜单,然而,在Electron桌面应用中,这一功能需自行编写代码实现,本文详细介绍了如何在Vue3中手动实现右键菜单的编辑、复制、粘贴功能,并提供了代码示例,更多细节和相关教程可参考脚本之家的其他文章2024-10-10
解决vue打包后刷新页面报错：Unexpected token <
这篇文章主要介绍了解决vue打包后刷新页面报错：Unexpected token <相关知识点，需要的朋友们参考下。2019-08-08
随着Vue的使用越来越多,对Vue的其他知识点也开始逐渐多了解一点,这次做页面上的计算,用了Watch侦听器,这篇文章主要给大家介绍了关于Vue中侦听器基本用法的相关资料,需要的朋友可以参考下2021-08-08
这篇文章主要为大家详细介绍了Vue实现可复用轮播组件的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了vue如何动态获取当前时间问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
无论是开发新手还是经验丰富的老手，我们都喜欢开源软件包。本文主要介绍了35个最好用的Vue开源库，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-01-01
这篇文章主要介绍了electron + vue项目实现打印小票功能,需要的朋友可以参考下2018-11-11
vue3使用vuex实现页面实时更新数据实例教程(setup)
在前端开发中往往会遇到页面需要实时刷新数据的情况,给用户最新的数据展示,这篇文章主要给大家介绍了关于vue3使用vuex实现页面实时更新数据(setup)的相关资料,需要的朋友可以参考下2022-09-09
详解element-ui 组件el-autocomplete使用踩坑记录
最近使用了el-autocomplete组件，本文主要介绍了element-ui 组件el-autocomplete使用踩坑记录，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
最新评论