无法全局注册组件VUE 3

Question

我有一个可重用的按钮，我想将它呈现为一个单独的组件@/components/UI/MyButton‘。这个元素我在'UI/index.js‘中注册

import MyButton from "@/components/UI/MyButton";

export default {
  MyButton,
};

然后，我通过'main.js‘中的а或orEach方法进行全局注册。

import { createApp } from "vue";
import App from "./App";
import componentsUI from "./components/UI";

const app = createApp(App);

componentsUI.forEach((component) => {
  app.component(component.name, component);
});

app.mount("#app");

但是方法forEach会导致错误--forEach不是函数“，并且项目没有呈现。如果我不使用此方法，则该按钮将呈现，但没有样式。

如何在全球范围内注册可重用组件？

Answer 1

在UI/index.js中，尝试导出数组[]而不是对象{}

import MyButton from "@/components/UI/MyButton";

export default [
  MyButton,
];

Answer 2

试试这个：

在components目录中，创建基本文件夹，然后创建_index.js。

// components/base/_index.js

const requireComponent = require.context(
  // The relative path of the components folder
  './',
  // Whether or not to look in subfolders
  false,
  // The regular expression used to match base component filenames
  /[A-Z]\w+Base\.vue$/
);

const register = (app) => {
  requireComponent.keys().forEach((fileName) => {
    const componentConfig = requireComponent(fileName);

    const componentName = fileName
      .split('/')
      .pop()
      ?.replace(/\.\w+$/, '');

    app.component(componentName, componentConfig.default || componentConfig);
  });
};

export default {
  register,
};

Button组件名称必须如下(基于regex)：ButtonBase.vue

// main.js

import { createApp } from 'vue';
import App from './App.vue';
import BaseComponents from './components/base/_index';

const app = createApp(App);

BaseComponents.register(app);

app.mount('#app');