Recibo este error al intentar representar un código de prueba de Vue en el navegador:

[Advertencia de Vue]: no se pudo resolver el componente: entrada personalizada Si se trata de un elemento personalizado nativo, asegúrese de excluirlo de la resolución del componente a través de compilerOptions.isCustomElement.

custom-input es el componente secundario que creé.

 app.component('custom-input ', { template: ` <div> <label> {{ label }} <input type="text" /> </label> </div> `, props: ['label'] })

Su padre es el formulario de inicio de sesión.

 app.component('login-form', { template: ` <div> <form @submit.prevent="handleSubmit"> <h1> {{ title }} </h1> <custom-input type="email" v-bind:label="emailLabel" /> <custom-input type="password" v-bind:label="passwordLabel" /> <button>Log in</button> </form> </div> `, components: ['custom-input'], data () { return { title: "Login Form", email: '', password: '', emailLabel: 'Email', passwordLabel: 'Password', } }, methods: { handleSubmit() { console.log(this.email + "\n" + this.password) } } })

Como puede ver, estoy usando la etiqueta de entrada personalizada dos veces en el componente del formulario de inicio de sesión, pero recibo el error que mencioné antes y no se representan, solo obtengo el resto del código HTML de la plantilla del formulario de inicio de sesión. .

error

El error dice que debo excluir el componente personalizado de la resolución del componente, así que agregué la línea de código:

 app.config.compilerOptions.isCustomElement = (tag) => tag.includes('custom-input');

Pero luego obtuve el mismo resultado pero sin el mensaje de advertencia.