Cuando usamos componentes en Vue, a menudo usamos propiedades o accesorios para pasar datos personalizados al componente secundario. Por ejemplo, podemos decirle a nuestro componente secundario que para esta versión del componente, "nombre" se establece en "mi componente": <Component name="my-component" /> Si tratamos de llamar a este componente sin un prop, devuelve en el código, o simplemente como ningún texto cuando se representa en HTML. Digamos que nuestro se ve así: name undefined Component <script> export default { props: { name: String }, mounted() { console.log(this.name); } } </script> <template> <p> Hi {{ name }} </p> </template> Todo lo que hace nuestro componente es definir un accesorio llamado de tipo y la consola registra esta propiedad. También lo muestra en el formulario . El único problema aquí es que si el no está definido cuando se llama al componente, no se proporciona un nombre predeterminado. name String Hi {{ name }} name ¿Cómo establecer valores de prop predeterminados en Vue usando la API de opciones? Establecer valores de prop predeterminados en Vue es fácil. Si está utilizando la API de opciones, entonces es tan fácil como extender nuestra propiedad a un objeto. Por ejemplo, si queremos que nuestro tenga un valor predeterminado de " ", entonces actualizamos nuestra propiedad para que se vea así: name allí export default { props: { name: { type: String, default: "there" } }, mounted() { console.log(this.name); } } Ahora, si no se da ningún nombre, el mensaje simplemente dirá ' '. Hola ¿Cómo establecer valores de prop predeterminados en la API de composición? En la API de composición, la definición de accesorios utiliza la función . Esta función sigue la misma sintaxis que los accesorios definidos en la API de opciones. defineProps Definir un accesorio sin un valor predeterminado se ve así: import { defineProps } from 'vue'; const props = defineProps({ name: String }); Y luego, para agregar un valor predeterminado, extendemos el para tener una propiedad predeterminada, como antes: name import { defineProps } from 'vue'; const props = defineProps({ name: { type: String, default: "there" } }); ¿Cómo configurar prop según sea necesario en Vue? Para evitar la necesidad de establecer un valor predeterminado en una propiedad, podemos forzar que una propiedad sea obligatoria utilizando el campo . required Por ejemplo, si queremos que se defina nuestra propiedad de , simplemente establecemos en : name required true &lt;script setup> import { defineProps } from 'vue'; const props = defineProps({ name: { type: String, required: true } }); </script> También publicado aquí

2022 - HackerNoon Contributor of the Year - Coding

2022 - HackerNoon Contributor of the Year - Coding Skills

2022 - HackerNoon Contributor of the Year - Java

2022 - HackerNoon Contributor of the Year - Javascript

2022 - HackerNoon Contributor of the Year - Website Development

2022 - Tip Your Hat Tutorials Best Tutorials

Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Coding

Nominated for 2022 - HackerNoon Contributor of the Year - Coding Skills

Nominated for 2022 - Tip Your Hat Tutorials Best Tutorials

Nominated for 2022 - HackerNoon Contributor of the Year - Java

Nominated for 2022 - HackerNoon Contributor of the Year - Website Development

Nominated for Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Typescript

Este audio es producido en el idioma original de la historia!

Demasiado Largo; Para Leer

Making security fun one episode at a time

¿Cómo establecer el valor predeterminado de los accesorios en Vue?

¿Cómo establecer el valor predeterminado de los accesorios en Vue?

Demasiado Largo; Para Leer

Johnny Simpson

About Author

ETIQUETAS

Languages

ESTE ARTÍCULO FUE PRESENTADO EN...

¿Cómo establecer el valor predeterminado de los accesorios en Vue?

Demasiado Largo; Para Leer

Johnny Simpson

About Author

ETIQUETAS

Languages

ESTE ARTÍCULO FUE PRESENTADO EN...

HISTORIAS RELACIONADAS