Hola, nuevo en Vue y aprendiendo a través de tutoriales. He creado un componente Header.vue e intento importarlo a App.vue. Esta es la estructura: estructura de código
aquí está App.vue:
<template> <Header /> </template> <script> import Header from "./components/Header.vue"; export default { setup() { return { Header, }; }, }; </script> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Fira Sans", sans-serif; } body { background: #eee; } </style>Aquí está el componente Header.vue:
<template> <div> <h1>Income Tracker</h1> <div class="total-income">$0</div> </div> </template> <script> export default { }; </script> <style scoped> header { display: flex; justify-content: space-between; align-items: center; padding: 15px 30px; background-color: #313131; border-bottom: 5px solid #ffce00; } header h1 { color: #eee; font-size: 28px; } header .total-income { font-family: "Fira Code", "Fira Sans", sans-serif; background-color: #ffce00; color: #fff; font-size: 20px; font-weight: 900; padding: 5px 10px; min-width: 100px; text-align: center; border-radius: 8px; box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.25); text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.25); } </style>Obtengo el estilo de App.vue pero el componente no se resuelve. En la consola me sale este error: mensaje de error
Lo que he intentado es el desbordamiento de pila y la búsqueda en Google basada en el texto del mensaje de error.
O no estoy buscando correctamente o no tengo suficiente experiencia en este momento para identificar el problema que causa este problema.
La educación sobre cómo resolver esto sería muy apreciada.
Es necesario registrar los componentes en la opción de components .
export default { components: { Header, }, };Ver los documentos .
Tenga en cuenta que incluir una entrada sin valor en un objeto de JavaScript (por ejemplo, Header ) es la sintaxis de ES6 para Header: Header .
Necesitas usar componentes como este
<template> <header /> </template> <script> import Header from "./components/Header.vue"; export default { components: { "header": Header }, setup() { return { Header, }; }, }; </script> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Fira Sans", sans-serif; } body { background: #eee; } </style>En su Header.vue reemplace su etiqueta div con la etiqueta de encabezado, porque está diseñando la etiqueta de encabezado en su CSS y no la etiqueta div.
<template> <header> <h1>Income Tracker</h1> <div class="total-income">$0</div> </header> </template>