Mi componente Vue navbar.vue no importa otros componentes.
Este es Vue 3 con la opción API.
Todos los componentes son importados por index.js en la carpeta de componentes
import navbar from '@/components/navbar.vue' import btn from '@/components/btn.vue' export { navbar, btn } Esta es la barra de navbar.vue :
<template> <header class="navbar"> <ul> <li> <router-link to="/">Home</router-link> </li> <li> <btn></btn> </li> </ul> </header> </template> <script> import { btn } from '@/components' export default { name: 'navbar', components: { btn } } </script> Estos son los componentes btn.vue :
<template> <button class="btn" @click="$emit('click')"> <slot/> </button> </template> <script> export default { name: 'btn' } </script>Tu index.js exportó navbar y btn . Y también ya ha exportado otro componente de navbar.vue en el mismo nivel de archivo. Así que cree una carpeta separada para la barra de navbar y btn o cambie el nombre de exportación. Soy nuevo en marcos. Espero que esto funcione.