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>