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

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全局组件和全局指令的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

您可能感兴趣的文章:

  • 自定义vue全局组件use使用、vuex的使用详解
  • 浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
  • Vue中自定义全局组件的实现方法
  • vue 自定义全局方法,在组件里面的使用介绍
  • Vue组件之全局组件与局部组件的使用详解
赞 (0)

相关推荐

  • Vue中自定义全局组件的实现方法

    前言 有时候我们在做开发的时候,就想自己写一个插件然后就可以使用自己的插件,那种成就感很强.今天就解决了一个长期困扰着我的问题,现在记录一下,供日后参考. 涉及知识点是Vue.js官网教程中的插件使用 方法如下: 首先我遇到的问题就是我自定义的组件如果需要在项目中其他组件中多次被调用,而我之前的解决方法就是简单的,哪里需要在哪引用.这无疑增加了许多代码重复. 而在使用Vue.js的一些UI框架的时候则注意到,只需要在项目的入口文件中import这个插件然后在接着Vue.use('插件名').这样

  • 浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件

    简介 Vue.use( plugin ):安装 Vue.js 插件.如果插件是一个对象,必须提供 install 方法.如果插件是一个函数,它会被作为 install 方法.install 方法将被作为 Vue 的参数调用. 当 install 方法被同一个插件多次调用,插件将只会被安装一次. Vue.js 的插件应当有一个公开方法 install .这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象: MyPlugin.install = function (Vue, op

  • vue 自定义全局方法,在组件里面的使用介绍

    在main.js里进行全局注册 Vue.prototype.funcName = function (){} 在所有组件里可调用 this. funcName(); 以上这篇vue 自定义全局方法,在组件里面的使用介绍就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • Vue组件之全局组件与局部组件的使用详解

    Vue组件之全局组件与局部组件的使用详解

    组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以is特性扩展.个人认为就是一个可以重复利用的结构层代码片段. 全局组件注册方式:Vue.component(组件名,{方法}) eg: <body> <div id="app"> <my-component>&l

  • 自定义vue全局组件use使用、vuex的使用详解

    自定义vue全局组件use使用(解释vue.use()的原理) 我们在前面学习到是用别人的组件:Vue.use(VueRouter).Vue.use(Mint)等等. 其实使用的这些都是全局组件,这里我们就来讲解一下怎么样定义一个全局组件,并解释vue.use()的原理 而我们再用Axios做交互,则不能使用Vue.use(Axios),因为Axios没有install自定义一个全局Loading组件,并使用: 总结目录: |-components |-loading |-index.js 导出

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

    Vue中的组件和指令分为局部组件.局部指令和全局组件.全局指令.对于注册有一定数量的全局指令和全局组件时,官方文档中的方法就显得有些不够清爽了. 全局组件 在Vue官方文档中介绍的是使用Vue.component(tagName, options)来创建一个全局组件.但是这种方法是与根实例写在同一个文件中,如果要同时注册多个全局组件,就会使根实例文件过重,因此使用Vue.use()来"安装"全局组件,就显得更轻一些. 方法: 1.新建一个plugins文件夹 2.在文件夹中创建放置全局

  • vue给组件传递不同的值方法

    这里讲解一下Vue 官网的一个实例,Vue将数据遍历传递给多个组件,这个是我们实际开发中常做的事情.一般大型应用都是使用组件搭建起来的,我们需要给组件传递不同的值,来实现不同的展现,实现代码的复用. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="

  • vue实现组件通信的八种方法实例

    目录 1.props 父组件--->子组件通信 2.$emit 子组件--->父组件传递 3.bus(事件总线) 兄弟组件通信 4.$parent.$children 直接访问组件实例 5.$refs 6.provide/inject(提供/注入) 多组件或深层次组件通信 7.slot(slot-scope作用域插槽) 子元素-->父元素(类似于通信) 8.vuex状态管理 总结 对于vue来说,组件之间的消息传递是非常重要的,下面是我对组件之间消息传递的常用方式的总结 1.props

  • Vue 动态组件与 v-once 指令的实现

    本文介绍了Vue 动态组件与 v-once 指令的实现,分享给大家,具体如下: <div id="root"> <child-one></child-one> <child-two></child-two> <button>change</button> </div> Vue.component('child-one', { template: `<div>child-one&l

  • vue 兄弟组件的信息传递的方法实例详解

    前言 兄弟组件的信息传递有三种方式: 1.vuex 传递. 会将信息公有化. 此方法可在所有组件间传递数据. 2.建立Vue 实例模块传递数据. Vue 实例模块会成为共用的事件触发器. 其通过事件传递的信息不回被公有化. 3.建立事件链传递数据. 一个兄弟组件通过事件将信息传给兄弟组件共有的父组件. 父组件再将信息通过属性传递给另一个兄弟组件. 若兄弟组件不是亲兄弟,而是堂兄弟,也就是他们有一个共同的爷爷,那么此方法会使程序变得繁琐. 一,vuex 传递数据 1.安装vuex npm inst

  • 快速了解Vue父子组件传值以及父调子方法、子调父方法

    稍微总结了一下Vue中父子间传值以及相互调方法的问题,非常基础.希望可以帮到你!先来个最常用的,直接上代码: 1.父传值给子组件 父组件: <template> <div> <p class="father">父组件</p> <child :sid="id"></child> </div> </template> <script> import child f

  • Vue 无限滚动加载指令实现方法

    也不存在什么加载咯, 就是一个判断滚动条是否到达浏览器底部了. 如果到了就触发事件,米到就不处理. 计算公式提简单的   底部等于(0) =  滚动条高度 - 滚动条顶部距离 - 可视高度.  反正结果就是0. 一.获取滚动条位置 class Scroll { static get top() { return Math.max(document.documentElement.scrollTop || document.body.scrollTop); } static get clientH

  • 详解Vue 动态组件与全局事件绑定总结

    最近在自学 Vue 也了解了一些基本用法,也记录了一些笔记有兴趣的朋友可以去查看我的其他文章,技术这东西真的不能光靠看,看是没有的,你必须要动手实践,只有在实战项目中才能发现问题,才能发现我们没有掌握的知识点,然后发现问题解决问题,我们的能力才能得以提升,要不然就有点眼高手低了. 基于这个想法于是就开始自己去撸了一个旅游网站,旅游网站嘛避免不了城市的选择,所以在实现城市选择列表的时候碰到的一些问题,以及解决办法今天就记录下来做一个总结. 城市列表选择组件 首先说说我们要实现一个什么样的城市选择组

  • vue.js组件之间传递数据的方法

    前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一. 组件 组件与组件之间,还存在着不同的关系.父子关系与兄弟关系(不是父子的都暂称为兄弟吧). 父子组件 父子关系即是组件 A 在它的模板中使用了组件 B,那么组件 A 就是父组件,组件 B 就是子组件. // 注册一个子组件 Vue.component('child', { data: function(){ text: '我是fathe

  • 用vue.js组件模拟v-model指令实例方法

    1.问题描述 在使用v-model指令实现输入框数据双向绑定,输入值时对应的这个变量的值也随着变化:但是这里不允许使用v-model,需要写一个组件实现v-model指令效果 <div id="user"> <input type="text" v-model="username"> <label>{{username}}</label> </div> <script> le

随机推荐