vue封装全局组件

首先写是需要封装的组件

NavBarTitle.vue

<template>
    <div class="NavBarTitle">
        <van-nav-bar
                left-arrow
                @click-left="onClickLeft"
        >
        <div slot="title">{{NavBarTitle}}</div>
        </van-nav-bar>
    </div>
</template>
<style>
    .NavBarTitle .van-nav-bar__text,.van-nav-bar .van-icon{
        color:#333333;
    }
    .NavBarTitle /deep/ .van-nav-bar__title{
        font-size: 17px;
        color: #000;
        /*padding-top: 0.16rem;*/
    }
</style>
<script>
    import { NavBar } from 'vant';
    export default {
        props: ['NavBarTitle'],
        data() {
            return  {
//                NavBarTitle:"期中考试"
//                NavBarTitle:this.NavBarTitle
            }
        },
        components: {
            [NavBar.name]:NavBar,
        },
        methods:{
            onClickLeft(){
                this.$router.go(-1);
            }
        }
    }
</script>

然后在同目录创建一个NavBarTitle.js文件
NavBarTitle.js

// 组件全局注册
import Vue from 'vue'

import NavBarTitlefrom '@/components/NavBarTitle/NavBarTitle.vue'//封装共用

// 组件库
const Components = [
NavBarTitle
]

// 注册全局组件
Components.map((com) => {
Vue.component(com.name, com)
})

export default Vue

最后在main.js中引用就行了，注意还是要在挂载实例前去引用
main.js

 import './components/NavBarTitle'

通常在组件使用前，需要引入后再注册，但如果高频组件多了后，每次都这样做，不仅新增很多代码，效率还低！我们应该如何优化呢？
可以借助一下webpack的require.context() 方法来创建自己的（模块）上下文，从而实现自动动态require组件
先在components文件夹（这里面都是些高频组件）添加一个叫global.js的文件，在这个文件里使用require.context 动态将需要的高频组件统统打包进来，然后在main.js文件中引入global.js的文件.这样就无需再手动一个个引入了。

globalComponents.js

import Vue from 'vue'

function changeStr(str) {//首字符转大写
    return str.charAt(0).toUpperCase() + str.slice(1)
}
/*
 * require.context(path,sta,name)
 * path:其组件目录的相对路径
 * sta: 是否查询其子目录
 * name:匹配基础组件文件名的正则表达式    /\w.(vue|js)/
 */
const requireComponent = require.context('./', false, /\.vue$/)
// 查找同级目录下以vue结尾的组件 对应每个匹true配的文件名
const install = () => {
    requireComponent.keys().forEach(fileName => {
        let config = requireComponent(fileName); //获取组件配置
        // console.log(config) // ./child1.vue 然后用正则拿到child1
        let componentName = changeStr( //获取组件名
            fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')
        )
        // 如果这个组件选项是通过 `export default` 导出的，
        // 那么就会优先使用 `.default`，
        // 否则回退到使用模块的根。
        Vue.component(componentName, config.default || config)
    })
}
export default {
    install // 对外暴露install方法
}

main.js

import globalComponents from './plugins/globalComponents.js
Vue.use(globalComponents)

page.vue 页面引用文件

 <search-comp @onSearch="handleOnSearch" :conditionsData="conditionsData"></search-comp>

// 注意:组件中的name要跟文件名称一致

另外一直方式，直接加到this.$xxx

https://www.jb51.net/article/144952.htm