使用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 相关文章推荐
javascript 匿名函数的理解(透彻版)
Jan 28 Javascript
有道JavaScript监听浏览器的问题
Jun 23 Javascript
jQuery Tools Dateinput使用介绍
Jul 14 Javascript
javascript模拟实现C# String.format函数功能代码
Nov 25 Javascript
Angular中的Promise对象($q介绍)
Mar 03 Javascript
jQuery移动web开发中的页面初始化与加载事件
Dec 03 Javascript
jQuery EasyUI常用数据验证汇总
Sep 18 Javascript
代码整洁之道(重构)
Oct 25 Javascript
15分钟深入了解JS继承分类、原理与用法
Jan 19 Javascript
Vue侦测相关api的实现方法
May 22 Javascript
Vue+Node实现的商城用户管理功能示例
Dec 23 Javascript
JavaScript实现矩形块大小任意缩放
Aug 25 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
收音机史话 - 1960年代前后的DIY
2021/03/02 无线电
PHP读取txt文件的内容并赋值给数组的代码
2011/11/03 PHP
PHP中把有符号整型转换为无符号整型方法
2015/05/27 PHP
解析PHP之提取多维数组指定列的方法
2017/01/03 PHP
浅谈PHP5.6 与 PHP7.0 区别
2019/10/09 PHP
使用PHP开发留言板功能
2019/11/19 PHP
PHP $O00OO0=urldecode & eval 解密,记一次商业源码的去后门
2020/09/13 PHP
HTTP头隐藏PHP版本号实现过程解析
2020/12/09 PHP
javascript学习笔记(七)利用javascript来创建和存储cookie
2011/04/08 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
2015/03/14 Javascript
javascript实现炫酷的拖动分页
2015/05/11 Javascript
Node.js编程中客户端Session的使用详解
2015/06/23 Javascript
每天一篇javascript学习小结(Date对象)
2015/11/13 Javascript
jQuery取得iframe中元素的常用方法详解
2016/01/14 Javascript
JS动态增删表格行的方法
2016/03/03 Javascript
JavaScript学习笔记整理_关于表达式和语句
2016/09/19 Javascript
JavaScript构建自己的对象示例
2016/11/29 Javascript
利用forever和pm2部署node.js项目过程
2017/05/10 Javascript
微信小程序 sha1 实现密码加密实例详解
2017/07/06 Javascript
js 计算图片内点个数的示例代码
2019/04/04 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
2019/06/20 Javascript
vue实现页面滚动到底部刷新
2019/08/16 Javascript
[17:00]DOTA2 HEROS教学视频教你分分钟做大人-帕克
2014/06/10 DOTA
[00:21]DOTA2亚洲邀请赛 Logo演绎
2015/02/07 DOTA
Python实现约瑟夫环问题的方法
2016/05/03 Python
Django 导出项目依赖库到 requirements.txt过程解析
2019/08/23 Python
CSS3 2D模拟实现摩天轮旋转效果
2016/11/16 HTML / CSS
应届生船舶驾驶求职信
2013/10/19 职场文书
男方父母婚礼答谢词
2014/01/25 职场文书
渔夫的故事教学反思
2014/02/14 职场文书
网络技术专业推荐信
2014/02/20 职场文书
投标人廉洁自律承诺书
2014/05/26 职场文书
优秀教师个人材料
2014/12/15 职场文书
导游词之南京夫子庙
2019/12/09 职场文书
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
2021/04/17 Vue.js
详解Vue的列表渲染
2021/11/20 Vue.js