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

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

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

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

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

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

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

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

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

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

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

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

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

这样就会很方便。

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

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

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

时间: 2024-10-12 09:19:26

如何在Vue中建立全局引用或者全局命令的相关文章

如何在vue中使用ts

注意:此文并不是把vue改为全部替换为ts,而是可以在原来的项目中植入ts文件,目前只是实践阶段,向ts转化过程中的过渡. ts有什么用? 类型检查.直接编译到原生js.引入新的语法糖 为什么用ts? TypeScript的设计目的应该是解决JavaScript的"痛点":弱类型和没有命名空间,导致很难模块化,不适合开发大型程序.另外它还提供了一些语法糖来帮助大家更方便地实践面向对象的编程. typescript不仅可以约束我们的编码习惯,还能起到注释的作用,当我们看到一函数后我们立马

如何在vue中全局引入stylus文件的公共变量

新建 一个公共的stylus公共文件添加公共变量,如下: 修改下图圈出的文件: 具体的修改如下: // generate loader string to be used with extract text plugin function generateLoaders (loader, loaderOptions) { const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader] if (loader

如何在vue中使用sass

创建一个基于 webpack 模板的新项目 全局安装 vue-cli $ npm install --global vue-cli 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project 安装依赖 $ cd my-project $ npm install 为了使用sass,我们需要安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install

如何在 vue 中添加权限控制管理?---vue中文社区

前言 在一个项目中,一些功能会涉及到重要的数据管理,为了确保数据的安全,我们会在项目中加入权限来限制每个用户的操作.作为前端,我们要做的是配合后端给到的权限数据,做页面上的各种各样的限制. 需求 因为这是一个工作上的业务需求,所以对于我来说主要有两个地方需要进行权限控制. 第一个是侧边菜单栏,需要控制显示与隐藏. 第二个就是页面内的各个按钮,弹窗等. 流程 如何获取用户权限? 后端(当前用户拥有的权限列表)-> 前端(通过后端的接口获取到,下文中我们把当前用户的权限列表叫做 permission

如何在 iOS 中解决循环引用的问题

稍有常识的人都知道在 iOS 开发时,我们经常会遇到循环引用的问题,比如两个强指针相互引用,但是这种简单的情况作为稍有经验的开发者都会轻松地查找出来. 但是遇到下面这样的情况,如果只看其实现代码,也很难仅仅凭借肉眼上的观察以及简单的推理就能分析出其中存在的循环引用问题,更何况真实情况往往比这复杂的多: testObject1.object = testObject2; testObject1.secondObject = testObject3; testObject2.object = tes

Vue——如何在Vue中使用样式

使用class样式 1.数组 第一种使用方式,直接传递一个数组,注意:这里的class需要使用 v-bind做数据绑定 2.数组中使用三元表达式 false true 3.数组中嵌套对象 false true 4.直接使用对象(不用数组包裹) false true 既然是一个对象,那我们也可以直接在data身上写进行保存 内联样式 1.直接在元素上通过v-bind:style的形式,书写样式对象 2.将样式对象,定义到 data 中, 并直接引用到v-bind:style中 2.1在data上定

如何在magento中建立自定义页面

访问url为:http://youip/paypal/standard/help 那么我们反向分析.根据之前的分析,我们找到控制文件\app\code\core\Mage\Paypal\controllers\StandardController.php在里面增加一个方法 public function helpAction() { $this->loadLayout(); $this->_initLayoutMessages('paypal/session'); $this->rend

如何在MyEclipse中建立一个代理服务器

一.什么是 TCP/IP Monitor TCP/IP monitor 是可以监控在某个端口上通过 TCP/IP 协议传送的通信数据的一个工具软件. TCP/IP monitor 工具,通过一些配置,这个工具可以用简单明了的形式将客户端和服务器端之间传输的数据呈现给开发者. 二.TCP/IP monitor工作原理 TCP/IP monitor 类似一个代理服务器或者转发器.其工作原理如下: 1.客户端向"本地监听端口"发起请求,TCP/IP Monitor 获取客户端发送的数据,并显

如何在Apache中建立一个新端口

环境: Windows server 2008 R2, Apache, PHP5 步骤: 建立一个目录,里面放置一个index.php. 打开Apache\conf\httpd.conf 文件,做如下的更改: 监听端口 s 打开以下两项的注释: LoadModule vhost_alias_module modules/mod_vhost_alias.so Include conf/extra/httpd-vhosts.conf 注释掉如下的内容 #<Directory /> # Option