Vue全局组件的开发

把一些使用频率较高的组件封装为全局组件，防止频繁引入。例如：element中的各个组件

实现方法，通过借助webpack的require.context() 方法来封装自己常用的全局组件，开发步骤如下
在这里插入图片描述

第一步，封装importAll.js

//  importAll.js文件
import Vue from 'vue'
//修改组件名称
function changeStr (str) {
    
    
  return str.charAt(0).toUpperCase() + str.slice(1)
}
// 这里把allCommon目录下的所有的组件都引入
const requireComponent = require.context("@/components/allCommon", true, /\.vue$/)

// 查找同级目录下以vue结尾的组件
const install = () => {
    
    
  requireComponent.keys().forEach(fileName => {
    
    
    let config = requireComponent(fileName)
    console.log(config) // ./child1.vue 然后用正则拿到child1
    let componentName = changeStr(    // 生成组件名称，我这里生成的是A 、 B
      fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')
    )
    console.log(componentName)
    // 使用Vue.Component()把组件注册到全局
    Vue.component(componentName, config.default || config)
  })
}
export default {
    
    
  install // 对外暴露install方法,调用Vue.use()时，执行install方法
}

第二步，在main,js中引入

import importAll from '@/common/importAll'
Vue.use(importAll);   // 注册入全局（这里执行install方法）

第三步，在全局任意组件中都可调用
比如说在test.vue组件中，使用如下：

<template>
    <div>
         <A></A>
         <B></B>
    </div>
</template>

<script>
export default {
    
    
    data(){
    
    
        return {
    
    

        }
    }
}
</script>

最后我们就可以随时随地在页面中使用这些高频组件，无需再手动一个个引入了。

参考链接：https://www.cnblogs.com/yesyes/p/6658611.html

Vue全局组件的开发

Guess you like