Vue全局组件之install/use

在vue项目里的main.js里，往往会见到vue.use(xx)的写法，比如司空见惯的路由模块：

import VueRouter from 'vue-router'
Vue.use(VueRouter)

其实路由也就是vue的一个插件，这里被use进来，便成了一个全局组件，全局组件可以在任何地方不需要import而直接使用。

相关知识点：用 install(){ } 和 vue.use() 配合来开发和引入全局组件，在 install(){ } 中vue.component(‘name’, component) 声明的组件，可在main.js中用 vue.use ()加载，便于全局直接使用而无需每个页面都import。

极简示例：
1、components下新建文件夹 global，global 文件夹下新建文件 Global.vue：

<template>
    <div class="global-component">全局组件示例之“{{ arg }}”</div>
</template>

<script>
export default {
    props: {
        arg: {
            type: String,
            default: '默认'
        }
    }
}
</script>

<style scoped>
.global-component {
    background: rgba(0, 0, 0, 0.1);
    height: 60px;
    padding: 0 15px;
    border-radius: 5px;
    display: flex;
    align-items: center;
}
</style>

2、global 文件夹下再建文件 index.js：

import GlobalComponent from './Global'
const global = {
    install(Vue) {
        Vue.component('GlobalComponent', GlobalComponent)
    }
}
export default global

3、在main.js里引入并vue.use()：

import global from '@/components/global'
Vue.use(global)

4、在项目中其他任意组件中直接使用而无需import：

<template>
    <div class="hello">
        <GlobalComponent arg="213"></GlobalComponent>
    </div>
</template>

---

一句话日记：今天有猎头来电，加油保持进取吧，才值得别人来挖