vue注册全局组件

持续创作，加速成长！这是我参与「编程 · 10 月更文挑战」的第22天，点击查看活动详情

前言

在开发中使用vue，组件化是vue的一大特点之一，那么在项目中多次使用一个组件时，该怎么做呢？依旧是使用的时候导入使用吗？

这个时候就可以做一次封装，全局使用，就可以做vue组件全局注册。下面我将分享vue注册全局组件，希望对大家有帮助，欢迎讨论指出问题！

1.新建文件

为了统一管理全局组件，将封装的全局组件都写在src根目录下一个专门的文件夹中,名字可以叫components， 在名字可以叫components文件夹下新建xxx.vue文件。名字自定义，可以根据功能来定义，比如弹框可以命名为cNavTitle

<template>
      <div class="navbar">
          <div class="navbar-title"> {{ title }}</div>
      </div>
    </div>
</template>
<script>
export default {
  props: ['title', 'right', 'backPreUrl', 'green'],
  methods: {
    back() {
      let url = '/' + this.backPreUrl;
      this.$router.push(url);
    },
  }
};
</script>

2.统一导出组件

写好了文件需要导出，这个时候可以统一导出，在components文件夹下面新建index.vue 引人写好的XXX.vue,然后统一导出组件

import cNavTitle from './Narbar/NavTitleC.vue'
export default {
    cNavTitle,
}

3.注册组件

导出组件写好之后，就需要统一注册组件。在main.js中引入index.vue文件，注册为全局组件。

 //加载公共组件
import components from './components'

Object.keys(components).forEach((key) => {
  var name = key.replace(/(\w)/, (v) => v.toUpperCase())
  
  // 注册为全局组件 Vue.component('组件名',组件名)
  Vue.component(name, components[key])
})

4.使用组件

一切都做好了，就等着你开启使用了。 在需要使用的地方，直接使用组件就可以了，不需要再次引入组件了。

<cNavbar :title="title" :backPreUrl="backPreUrl"></cNavbar>
 

结束语

希望大家能够喜欢我的文章，我真的很用心在写，也希望通过文章认识更多志同道合的朋友。

最后伙伴们，如果喜欢我的可以给点一个小小的赞