使用use注册Vue全局组件和全局指令的方法


Posted in Javascript onMarch 08, 2018

Vue中的组件和指令分为局部组件、局部指令和全局组件、全局指令。对于注册有一定数量的全局指令和全局组件时,官方文档中的方法就显得有些不够清爽了。

全局组件

在Vue官方文档中介绍的是使用Vue.component(tagName, options)来创建一个全局组件。但是这种方法是与根实例写在同一个文件中,如果要同时注册多个全局组件,就会使根实例文件过重,因此使用Vue.use()来“安装”全局组件,就显得更轻一些。

方法:

1.新建一个plugins文件夹

2.在文件夹中创建放置全局组件的文件components.js

3.在components.js文件中引入所有要注册的全局组件

4.在app.js根实例文件中,引入components.js

以eg组件为例:

components.js:

import eg from '../components/eg.vue';
export default (Vue)=>{
 Vue.component("Eg",eg);
}

app.js:

import components from './plugins/components.js';
Vue.use(components);

经过上述编写后,就注册了全局组件Eg。

在需要注册多个全局组件的情况下,使用这种方式就显得更加清爽!

全局指令

对于全局指令的注册,官方文档给出的方法是使用Vue.directive(),位置同样是在根实例文件下,那么问题来了,如果多个全局指令,再加上多个全局组件,那么app.js文件将变得臃肿无比。

因此,同上面的注册全局组件方法相似,也是使用Vue.use()来“安装”全局指令。

方法:

1.新建一个plugins文件夹

2.在文件夹中创建放置全局组件的文件directives.js

3.在directives.js文件中引入所有要注册的全局指令

4.在app.js根实例文件中,引入directives.js

以v-focus指令为例:

directives.js:

export default (Vue)=>{
 Vue.directive("focus",{
  inserted:function(el){
   el.focus();
  }
 })
}

app.js

import directives from "./plugins/directives.js"
Vue.use(directives);

这样就注册了全局指令。

以上这篇使用use注册Vue全局组件和全局指令的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Mootools 1.2教程 类(一)
Sep 15 Javascript
javascript中运用闭包和自执行函数解决大量的全局变量问题
Dec 30 Javascript
js中判断文本框是否为空的两种方法
Jul 31 Javascript
商城常用滚动的焦点图效果代码简单实用
Mar 28 Javascript
jQuery实现可用于博客的动态滑动菜单
Mar 09 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
Oct 16 Javascript
Node.js 应用跑得更快 10 个技巧
Apr 03 Javascript
Bootstrap源码学习笔记之bootstrap进度条
Dec 24 Javascript
element-ui 中使用upload多文件上传只请求一次接口
Jul 19 Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
Sep 23 Javascript
20多个小事例带你重温ES10新特性(小结)
Sep 29 Javascript
JS this关键字在ajax中使用出现问题解决方案
Jul 17 Javascript
vue注册组件的几种方式总结
Mar 08 #Javascript
Vue.js自定义事件的表单输入组件方法
Mar 08 #Javascript
layui之select的option叠加问题的解决方法
Mar 08 #Javascript
vue2.0 axios跨域并渲染的问题解决方法
Mar 08 #Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
Mar 08 #Javascript
Vue.js实现图片的随意拖动方法
Mar 08 #Javascript
JS字符串去除连续或全部重复字符的实例
Mar 08 #Javascript
You might like
php中用加号与用array_merge合并数组的区别深入分析
2013/06/03 PHP
php读取mysql中文数据出现乱码的解决方法
2013/08/16 PHP
PHP上传文件时文件过大$_FILES为空的解决方法
2013/11/26 PHP
php反射应用示例
2014/02/25 PHP
php变量与数组相互转换的方法(extract与compact)
2016/12/02 PHP
详解Laravel服务容器的绑定与解析
2019/11/05 PHP
jQuery滚动加载图片效果的实现
2013/03/06 Javascript
使用js+jquery实现无限极联动
2013/05/23 Javascript
JS实现拖动示例代码
2013/11/01 Javascript
JavaScript输入邮箱自动提示实例代码
2014/01/13 Javascript
javascript js 操作数组 增删改查的简单实现
2016/06/20 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
2016/07/21 Javascript
jQuery实现标签页效果实战(4)
2017/02/08 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
2017/03/22 jQuery
JavaScript函数节流的两种写法
2017/04/07 Javascript
集成vue到jquery/bootstrap项目的方法
2018/02/10 jQuery
微信小程序实现之手势锁功能实例代码
2018/07/19 Javascript
js array数组对象操作方法汇总
2019/03/18 Javascript
js实现轮播图效果 纯js实现图片自动切换
2020/08/09 Javascript
javascript实现多边形碰撞检测
2020/10/24 Javascript
Python cx_freeze打包工具处理问题思路及解决办法
2016/02/13 Python
Python实现按特定格式对文件进行读写的方法示例
2017/11/30 Python
使用python获取电脑的磁盘信息方法
2018/11/01 Python
基于Python打造账号共享浏览器功能
2019/05/30 Python
Python绘制二维曲线的日常应用详解
2019/12/04 Python
CSS3图片旋转特效(360/60/-360度)
2013/10/10 HTML / CSS
AmazeUi Tree(树形结构) 应用小结
2020/08/17 HTML / CSS
俄罗斯品牌服装和鞋子在线商店:BRIONITY
2020/03/26 全球购物
办公室前台岗位职责
2014/01/04 职场文书
超市商业计划书
2014/05/04 职场文书
联欢会开场白
2015/06/01 职场文书
中学教师教学工作总结
2015/08/13 职场文书
办公室主任岗位竞聘书
2015/09/15 职场文书
幼儿园托班开学寄语(2016春季)
2015/12/03 职场文书
如何做好员工培训计划?
2019/07/09 职场文书
以下牛机,你有几个
2022/04/05 无线电