vue中install方法介绍

目录
  • 1、全局注册组件
  • 2、全局自定义指令

vue提供install可供我们开发新的插件及全局注册组件等

install方法第一个参数是vue的构造器，第二个参数是可选的选项对象

export default {

	install(Vue,option){

		组件

		指令

		混入

		挂载vue原型

	}

}

1、全局注册组件

import PageTools from '@/components/PageTools/pageTools.vue'

import update from './update/index.vue'

import ImageUpload from './ImageUpload/ImageUpload.vue'

import ScreenFull from './ScreenFull'

import ThemePicker from './ThemePicker'

import TagsView from './TagsView'

export default {

  install(Vue) {

    Vue.component('PageTools', PageTools)

    Vue.component('update', update)

    Vue.component('ImageUpload', ImageUpload)

    Vue.component('ScreenFull', ScreenFull)

    Vue.component('ThemePicker', ThemePicker)

    Vue.component('TagsView', TagsView)

  }

}

在main.js中直接用引用并Vue.use进行注册

import Component from '@/components'

Vue.use(Component)

2、全局自定义指令

export default{

	install(Vue){

		Vue.directive('pre',{

			inserted(button,bind){

				button.addEventListener('click',()=>{

					if(!button.disabled){

						button.disabled = true;

						setTimeout(()=>{

							button.disabled = false

						},1000)

					}

				})

			}

		})

	}

}

在main.js跟注册组件一样

import pre from '@/aiqi'

Vue.use(pre)

到此这篇关于 vue中install方法介绍的文章就介绍到这了,更多相关 vue中install方法内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 深入理解Vue的插件机制与install详细

    深入理解Vue的插件机制与install详细

    前言: 我们在使用Vue的时候,经常会使用并写一些自定义的插件,然后利用Vue.use引入.所以提到写插件,install这个方法是必不可少的.Vue.js 的插件应该暴露一个 `install` 方法.这个方法的第一个参数是 `Vue` 构造器,第二个参数是一个可选的选项对象.这是Vue官方对Vue插件的规范.那这install函数到底是什么东东呢,Vue内部到底用它做了什么处理,怎么调用的,今天我就给大家伙从源码层面把他整的明明白白. 看完这篇文章,你将学到: install函数可以做些什么

  • vue自定义组件(通过Vue.use()来使用)即install的用法说明

    在vue项目中,我们可以自定义组件,像element-ui一样使用Vue.use()方法来使用,具体实现方法: 1.首先新建一个Cmponent.vue文件 // Cmponent.vue <template> <div> 我是组件 </div> </template> <script> export default { } </script> <style scoped> div{ font-size:40px; col

  • vue踩坑记-在项目中安装依赖模块npm install报错

    在维护别人的项目的时候,在项目文件夹中安装npm install模块的时候,报错如下: npm ERR! path D:\ShopApp\node_modules\fsevents\node_modules\abbrev npm ERR! code ENOENT npm ERR! errno -4058 npm ERR! syscall access npm ERR! enoent ENOENT: no such file or directory, access 'D:\ShopApp\nod

  • vue npm install 安装某个指定的版本操作

    npm安装指定版本的package,只需要在命令行之后加上 '@版本号'即可,操作如下: 1.vue-print-nb最新版本是1.5.0版本,如果我们只想要下载1.2.0版本,操作如下: npm install --save-dev vue-print-nb@1.2.0 npm install --save vue-print-nb@1.2.0 2.命令介绍(--save -dev) --save:将保存配置信息到package.json.默认为dependencies节点中(生产). --d

  • vue中install方法介绍

    目录 1.全局注册组件 2.全局自定义指令 vue提供install可供我们开发新的插件及全局注册组件等 install方法第一个参数是vue的构造器,第二个参数是可选的选项对象 export default { install(Vue,option){ 组件 指令 混入 挂载vue原型 } } 1.全局注册组件 import PageTools from '@/components/PageTools/pageTools.vue' import update from './update/in

  • Vue中使用方法、计算属性或观察者的方法实例详解

    熟悉 Vue 的都知道 方法methods.计算属性computed.观察者watcher 在 Vue 中有着非常重要的作用,有些时候我们实现一个功能的时候可以使用它们中任何一个都是可以的,但是它们之间又存在一些不同之处,每一个都有一些适合自己的场景,我们要想知道合适的场景,肯定先对它们有一个清楚的了解,先看一个小例子. <div id="app"> <input v-model="firstName" type="text"&

  • vue中destroyed方法的使用说明

    我们从destroyed的字面意思可知,中文意为是"销毁"的意思,当我们离开这个页面的时候,便会调用这个函数(具体可以看看vue的的生命周期),我们常用来销毁一些监听事件及定时函数,例如: // 销毁监听事件 destroyed() { window.removeEventListener('resize', this.resizeWin) } 从上函数可知,当用户离开页面的时候便会销毁监听事件. 补充知识:vue页面刷新时,执行了哪些生命周期--谨慎使用beforeDestroy和d

  • 在vue中封装方法以及多处引用该方法详解

    步骤: 1.先建立一个文件,放你想封装的方法:然后导出: 部分代码: 注: 导出这个地方需要特别注意:如果是一个对象的话:export 对象:如果是一个函数的话:export { 函数 } 2.引入文件: 补充知识:vue uni-app 公共组件封装,防止每个页面重复导入 1.公共插件 实现目标,将公共组件或者网络请求直接在this中调用,不需要再页面引用 #例如网络请求 var _this = this; this.api.userInfo({ token: '' } #通用工具 _this

  • Vue中props用法介绍

    Vue中props用法介绍

    ​前言: 在Vue中通过props,可以将原本孤立的组件串联起来,也就是可以子组件可以接收父组件传递过来的data,比如子组件想要引用父组件的数据,那么在props里面声明一个变量,这个变量就可以引用父元素的数据. 实例演示: 子组件: <template> <div> <h3>我是{{name}},今年{{age}}岁,爱好:{{hobby}}</h3>,{{flag}} </div> </template> <script&

  • Vue中render方法的使用详解

    先说一下对官网上demo的个人理解: <!DOCTYPE html> <html> <head> <title>Vue的render方法说明</title> <script src="vue.js"></script> </head> <body> <div id="app"> <child :level="1">

  • python中MethodType方法介绍与使用示例

    前言 本文主要给大家介绍了关于python中MethodType方法的相关内容,分享出来供大家参考学习,话不多说,来一起看看详细的介绍吧 示例代码 #!/usr/bin/python # -*-coding:utf-8-*- from types import MethodType """ 文件名 class2.py MethodType 测试 """ # 首先看第一种方式 #创建一个方法 def set_age(self, arg): self

  • python中join()方法介绍

    描述 Python join() 方法用于将序列中的元素以指定的字符连接生成一个新的字符串. 语法 join()方法语法: str . join ( sequence ) 参数 sequence -- 要连接的元素序列. 返回值 返回通过指定字符连接序列中元素后生成的新字符串. 实例 以下实例展示了join()的使用方法: 1.以某规则连接元组: >>> str="-" >>> seq=('a','b','c') >>> print

  • Vue实例简单方法介绍

    Vue实例简单方法介绍

    Vue实例的一些简单方法 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script src="http://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="box&

  • vue中实现在外部调用methods的方法(推荐)

    1.首先定义一个公共的vue组件: var eventHub = new Vue(); 2.在事件当前的组件中,在created中,用$on向公共的组件eventHub传递,translate是自定义的,getCardNum(data)是要在外部调用的方法; eventHub.$on('translate', function (data) { that.getCardNum(data); }); 3.最后在父组件中,注意负组件要用一个变量保存,var vm = new Vue({}): 4.在

随机推荐