vue3全局注册组件

方法一：

main.js引入

// 引入所需的组件
import Footer from './components/Footer.vue'
import Test from './components/Test.vue'
// 调用app实例的component()方法，在全局链式注册组件
app.component('Footer', Footer).component('Test', Test)

方式二：

在src目录下的components里新建index.js，以后引入的组件只需在index.js中引入即可

import Footer from './Footer.vue'
import Test from './Test.vue'

const Components = {
  Footer: Footer,
  Test
};

// for in 方法
export const registerComponents = (app) => {
  for (let item in Components) {
    console.log(item)
    app.component(item, Components[item])
  }
}

// Object.keys() 方法
// Object.keys()会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致
export const registerComponents = (app) => {
  Object.keys(Components).forEach((key) => {
    app.component(key, Components[key]);
  });
};

main.js引入

import { registerComponents } from './components'
registerComponents(app);