vue中的install 方法有什么用?

2,880 阅读1分钟

vue中install方法

vue提供install可供我们开发新的插件及全局注册组件等
install方法第一个参数是vue的构造器,第二个参数是可选的选项对象

export default {
	install(Vue,option){
		组件
		指令
		混入
		挂载vue原型
	}
}

第一种:全局注册组件

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)

全局自定义指令

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.use(),具体如下:
1、新建一个test.vue文件

<template>
    <div>
        一个测试组件
    </div>
</template>

<script>
    export default {
 
    }
</script> 

2、在同一目录下建立index.js文件,在这个文件中使用install方法来全局注册该组件

import test from './test.vue';   
test.install = function (Vue) {
  Vue.component(test.name, test );
}; 
export default test ;

3、使用

<template>
   <div>
      <test ></test >
   </div>    
</template>

<script>
import test from '@/components/test ';
    export default {
      components: {
        test 
      },
    }
</script>