vue中组件的注册方式

组件注册方式分为全局注册，局部注册；

全局注册：为了使注册更清晰，我将组件注册的部分单独放到一下文件中了，在utils文件夹下新建文件 components.js 文件，内容如下：

import Vue from 'vue';
import myComponentOne from '../components/BasecompA.vue'; // 文件组件
import myComponentTwo from '../components/BasecompB.vue'; // 文件组件

Vue.component(myComponentOne.name, myComponentOne)
Vue.component(myComponentTwo.name, myComponentTwo)

（文件组件中必须要定义name属性，然后组件注册时要使用组件的名字注册；）

components.js文件也要在main.js中引入一下，

// 导入全局组件
import "./utils/components";

<-----两个组件代码例子：

<template>
  <div style="width:80px;height:60px;border:1px solid red;margin: 0 auto;">组件A</div>
</template>
<script>
export default {
  name: "compa",
  data() {
    return {};
  },
  methods: {},
};
</script>
<style lang="less" scoped>
</style>

---->

在其他文件模块中可以使用全局注册的组件了：

 <compa></compa> 
 <compb></compb>

效果：

局部注册：

在使用组件的文件中，引入组件，import compa from '@/components/a.vue'

然后在该文件中的属性引入：

  components: {

    compa,

  },

然后在该文件中使用就ok了，<compa></compa>