使用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 相关文章推荐
静态的动态续篇之来点XML
Dec 23 Javascript
jQuery 操作下拉列表框实现代码
Feb 22 Javascript
jQuery 选择表格(table)里的行和列及改变简单样式
Dec 15 Javascript
如何将网页表格内容导入excel
Feb 18 Javascript
详解AngularJS 模块化
Jun 14 Javascript
Angular4自制一个市县二级联动组件示例
Nov 21 Javascript
ES6 系列之 Generator 的自动执行的方法示例
Oct 19 Javascript
this在vue和小程序中的使用详解
Jan 28 Javascript
Vue CL3 配置路径别名详解
May 30 Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
Sep 27 Javascript
Bootstrap实现模态框效果
Sep 30 Javascript
用Angular实现一个扫雷的游戏示例
May 15 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
Mysql的Root密码忘记,查看或修改的解决方法(图文介绍)
2013/06/14 PHP
关于ob_get_contents(),ob_end_clean(),ob_start(),的具体用法详解
2013/06/24 PHP
PHP调用JAVA的WebService简单实例
2014/03/11 PHP
将FCKeditor导入PHP+SMARTY的实现方法
2015/01/15 PHP
DOM基础及php读取xml内容操作的方法
2015/01/23 PHP
php实时倒计时功能实现方法详解
2017/02/27 PHP
PHP利用pdo_odbc实现连接数据库示例【基于ThinkPHP5.1搭建的项目】
2019/05/13 PHP
JavaScript效率调优经验
2009/06/04 Javascript
浅谈javascript中的作用域
2012/04/07 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
2015/05/25 Javascript
jQuery三级下拉列表导航菜单代码分享
2020/04/15 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
基于ES6作用域和解构赋值详解
2017/11/03 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
2017/11/22 Javascript
bootstrap与pagehelper实现分页效果
2018/12/29 Javascript
vue使用video.js进行视频播放功能
2019/07/18 Javascript
Python实现PS滤镜的万花筒效果示例
2018/01/23 Python
简单实现python聊天程序
2018/04/01 Python
python 获取字符串MD5值方法
2018/05/29 Python
TensorFlow打印tensor值的实现方法
2018/07/27 Python
浅谈python中拼接路径os.path.join斜杠的问题
2018/10/23 Python
django ManyToManyField多对多关系的实例详解
2019/08/09 Python
python实现3D地图可视化
2020/03/25 Python
Python decorator拦截器代码实例解析
2020/04/04 Python
使用matplotlib动态刷新指定曲线实例
2020/04/23 Python
python中rc1什么意思
2020/06/19 Python
css3 利用transform打造走动的2D时钟
2020/10/20 HTML / CSS
世界上最受欢迎的花店:1-800-Flowers.com
2020/06/01 全球购物
俄罗斯家居用品购物网站:Евродом
2020/11/21 全球购物
中专毕业生自我鉴定范文
2013/11/09 职场文书
粗加工管理制度
2014/02/04 职场文书
三字经教学反思
2014/04/26 职场文书
个人评语大全
2014/05/04 职场文书
小学优秀班集体申报材料
2014/05/25 职场文书
导游词之重庆渣滓洞
2020/01/08 职场文书
一次Mysql update sql不当引起的生产故障记录
2022/04/01 MySQL