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.
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 '.
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" } });
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
:
<script setup> import { defineProps } from 'vue'; const props = defineProps({ name: { type: String, required: true } }); </script>
También publicado aquí