使用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 相关文章推荐
实现web打印的各种方法介绍及实现代码
Jan 09 Javascript
js 获取、清空input type="file"的值示例代码
Feb 19 Javascript
jquery防止重复执行动画避免页面混乱
Apr 22 Javascript
jQuery实现获取table表格第一列值的方法
Mar 01 Javascript
如何高效率去掉js数组中的重复项
Apr 12 Javascript
jQuery联动日历的实例解析
Dec 02 Javascript
详解vue-cli中配置sass
Jun 21 Javascript
JavaScript 自定义事件之我见
Sep 25 Javascript
ES6 javascript中class类的get与set用法实例分析
Oct 30 Javascript
详解Vue-Router源码分析路由实现原理
May 15 Javascript
微信小程序自定义组件components(代码详解)
Oct 21 Javascript
浅谈Vue 函数式组件的使用技巧
Jun 16 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下载文件名中的中文乱码问题解决方法
2015/03/05 PHP
PHP扩展类型及安装方式解析
2020/04/27 PHP
封装了一个js图片轮换效果的函数
2011/09/28 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
2013/01/27 Javascript
javascript数组排序汇总
2015/07/07 Javascript
javascript for-in有序遍历json数据并探讨各个浏览器差异
2015/11/30 Javascript
JavaScript、jQuery与Ajax的关系
2016/01/24 Javascript
简单三步实现报表页面集成天气
2016/12/15 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
2017/04/01 Javascript
微信小程序五星评分效果实现代码
2017/04/06 Javascript
SpringMVC简单整合Angular2的示例
2017/07/31 Javascript
webpack引入eslint配置详解
2018/01/22 Javascript
angular5 httpclient的示例实战
2018/03/12 Javascript
解决vue-cli3 使用子目录部署问题
2018/07/19 Javascript
Vue核心概念Getter的使用方法
2019/01/18 Javascript
vue实现全匹配搜索列表内容
2019/09/26 Javascript
JavaScript 类的封装操作示例详解
2020/05/16 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
nodejs中的异步编程知识点详解
2021/01/17 NodeJs
[01:06:42]VP vs NewBee Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
布同自制Python函数帮助查询小工具
2011/03/13 Python
python数据结构之二叉树的建立实例
2014/04/29 Python
python中实现数组和列表读取一列的方法
2018/04/03 Python
python matplotlib 在指定的两个点之间连线方法
2018/05/25 Python
python 解决print数组/矩阵无法完整输出的问题
2020/02/19 Python
Python ConfigParser模块的使用示例
2020/10/12 Python
Django实现简单的分页功能
2021/02/22 Python
中国跨境海淘网站:考拉海购
2016/08/01 全球购物
开会迟到检讨书
2014/02/03 职场文书
主题实践活动总结
2014/05/08 职场文书
给校长的建议书400字
2014/05/15 职场文书
幼儿园六一儿童节活动方案
2014/08/26 职场文书
田径运动会通讯稿
2014/09/13 职场文书
企业授权委托书范本
2014/09/22 职场文书
Java十分钟精通进阶适配器模式
2022/04/06 Java/Android
MySQL中order by的执行过程
2022/06/05 MySQL