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

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í