Estoy trabajando en una aplicación Vue 3. Me encontré con un problema al trabajar con un <Navbar /> y uno de sus subcomponentes .
En App.vue:
<template> <Navbar /> <Content title="Home" /> <Footer /> </template> <script> import Navbar from './components/Navbar.vue' import Content from './components/Content.vue' import Footer from './components/Footer.vue' export default { name: 'App', components: { Navbar, Content, Footer } } </script>Dentro del componente Content.vue , puedo mostrar el título de esta manera:
<h1>{{ title }}</h1> <script> export default { name: 'Content', props: { title: String } } </script>Pero mostrar botones con sus etiquetas con el mismo patrón que el anterior no funciona:
// Button.vue component <template> <button class="btn btn-sm btn-generate"> {{ label }} </button> </template> <script> export default { name: 'Button', props: { label: String } } </script> // Navbar.vue component <template> <div class="navbar"> <Button label="Button 1" /> <Button label="Button 2" /> </div> </template> <script> import Button from './Button' export default { name: 'Navbar', components: { Button } } </script> Como resultado del código anterior, dentro de <div class="navbar"> solo hay un botón sin etiqueta, en lugar de 2 botones etiquetados como "Botón 1" y "Botón 2".
Creo que nombrar su componente como el elemento HTML ya existente no es una buena idea. Intente cambiarlo a MyButton y use <my-button>... en el componente de la barra de navegación (todavía desea usar <button> en MyButton, ya que desea desarrollarlo).
Lo más probable es que el navegador siga seleccionando un botón predeterminado en lugar del tuyo.
La primera regla esencial mencionada en los documentos de Vue es Usar nombres de componentes de varias palabras .
Debe vincularlos de modo que: etiqueta = "botón 1"