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

246 阅读1分钟

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

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

在vue项目中,我们可以自定义组件,像element-ui一样使用Vue.use()方法来使用,具体实现方法:

1.首先新建一个Cmponent.vue文件

// Cmponent.vue

<template>
    <div>
        我是组件
    </div>
</template>
 
<script>
    export default {

    }
</script>
 
<style scoped>
    div{
    font-size:40px;
    color:#fbb;
    text-align:center;
    }
</style>

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

import component from './Cmponent.vue'
    const component = {
        install:function(Vue){
        Vue.component('component-name',component)
    } //'component-name'这就是后面可以使用的组件的名字,install是默认的一个方法
}

// 导出该组件  
export default component  

3.在main.js中使用Vue.use以便可以在全局使用该插件

只要在index.js里规定了install方法,就可以向其他ui组件库那样,使用Vue.use()来全局使用

import component from './index.js'
Vue.use(component)