vue全局组件自动加载注册（重点）

客官°小女子只卖身不卖艺 2023-03-12 09:22 23阅读 0赞

#### 全局组件自动加载注册（重点） ####

> [官方文档][Link 1]
> 
> 在src / components / 新建global文件夹；（这个路径与components/index.js中的配置保存一致）
> 
> 第一步：global / test.vue（测试使用）
> 
> 第二步：在需要的页面以标签的形式使用即可。`<base-test></base-test>`
> 
>     <template>
>     <div class="create">
>     this is a test
>     </div>
>     </template>
>     
>     <script>
>     
>     export default {
>     // 必须有name属性
>     name: 'baseTest',
>     methods: {
>     
>     }
>     }
>     </script>
>     
>     <style>
>     
>     </style>
> 
> 第三步：在components / 新建index.js
> 
>     import Vue from 'vue'
>     
>     const requireComponent = require.context(
>     // 全局组件自动加载注册：在components / 新建global文件夹（放置全局组件）
>     './global',
>     // 是否查询其子目录
>     true,
>     // 匹配基础组件文件名的正则表达式
>     /\.vue$/
>     )
>     
>     requireComponent.keys().forEach(fileName => { 
>     // 获取组件配置
>     const componentConfig = requireComponent(fileName)
>     
>     
>     // 全局注册组件
>     Vue.component(
>     // 如果这个组件选项是通过 `export default` 导出的，
>     // 那么就会优先使用 `.default`，
>     // 否则回退到使用模块的根。
>     componentConfig.default.name || componentConfig.name,
>     componentConfig.default || componentConfig
>     )
>     })
> 
> 第四步：在main.js中引入
> 
>     // 引入全局组件自动加载注册
>     import './components/index'

[Link 1]: https://cn.vuejs.org/v2/guide/components-registration.html#%E5%9F%BA%E7%A1%80%E7%BB%84%E4%BB%B6%E7%9A%84%E8%87%AA%E5%8A%A8%E5%8C%96%E5%85%A8%E5%B1%80%E6%B3%A8%E5%86%8C