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í
