paint-brush
¿Cómo establecer el valor predeterminado de los accesorios en Vue?por@smpnjn
58,477 lecturas
58,477 lecturas

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

por Johnny Simpson
Johnny Simpson HackerNoon profile picture

Johnny Simpson

@smpnjn

Product, Engineering, Web

2022/05/15
Read on Terminal Reader
Read this story in a terminal
Print this story
Read this story w/o Javascript
Read this story w/o Javascript

Demasiado Largo; Para Leer

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. En la API de composición, la definición de accesorios utiliza la función defineProps. Esta función sigue la misma sintaxis que los accesorios definidos en la API de opciones.
featured image - ¿Cómo establecer el valor predeterminado de los accesorios en Vue?
Johnny Simpson HackerNoon profile picture
Johnny Simpson

Johnny Simpson

@smpnjn

Product, Engineering, Web


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 name prop, devuelve undefined en el código, o simplemente como ningún texto cuando se representa en HTML. Digamos que nuestro Component se ve así:


 <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 name de tipo String y la consola registra esta propiedad. También lo muestra en el formulario Hi {{ name }} . El único problema aquí es que si el name no está definido cuando se llama al componente, no se proporciona un nombre predeterminado.


¿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 name tenga un valor predeterminado de " allí ", entonces actualizamos nuestra propiedad para que se vea así:


 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 defineProps . Esta función sigue la misma sintaxis que los accesorios definidos en la API de opciones.


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 name para tener una propiedad predeterminada, como antes:


 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 name , simplemente establecemos required en true :


 &lt;script setup> import { defineProps } from 'vue'; const props = defineProps({ name: { type: String, required: true } }); </script>

También publicado aquí

L O A D I N G
. . . comments & more!

About Author

Johnny Simpson HackerNoon profile picture
Johnny Simpson@smpnjn
Product, Engineering, Web

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN...

Permanent on Arweave
Read on Terminal Reader
Read this story in a terminal
 Terminal
Read this story w/o Javascript
Read this story w/o Javascript
 Lite