Tengo un botón reutilizable y quiero representarlo como un componente separado @/components/UI/MyButton'. Este elemento lo registro en 'UI/index.js'
import MyButton from "@/components/UI/MyButton"; export default { MyButton, };y luego me registro globalmente a través del método аorEach en 'main.js'.
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");pero el método forEach genera un error " components_UI__WEBPACK_IMPORTED_MODULE_2 _.default.forEach is not a function" y el proyecto no se procesa. Si no utilizo este método, el botón se renderiza pero sin estilos.
¿Cómo puedo registrar globalmente un componente reutilizable?
Prueba esto:
En el directorio de componentes, cree la carpeta base y luego cree _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 /[AZ]\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, };El nombre del componente Button debe ser así (basado en expresiones regulares): 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');En UI/index.js intente exportar una matriz [] no un objeto {} :
import MyButton from "@/components/UI/MyButton"; export default [ MyButton, ];