Читать книгу Aprender VueJS con 100 ejercicios prácticos - Angel Vazquez Vazquez - Страница 34

IMPORTANTE

Cuando enviamos propiedades al componente, si ponemos los dos puntos delante del nombre de la propiedad, estamos enviando un valor dinámico, en caso contrario será un valor en plano.

Hemos visto la importancia de las props en los componentes, son la primera línea de entrada de estos y por tanto deben ser el primer punto por validar para que nuestros componentes tengan el funcionamiento esperado.

Creemos un ejercicio para trabajar con los tipos de valores que podemos validar [1].

Para ello, creamos en el fichero “firstvue.js”, el componente “my-props” [2], donde en la sección props, definiremos:

• propRequired: texto, debido al “type:String” y será requerido recibir valor “required:true”.

• propArray: array, su valor por defecto se asigna mediante “default”, en este caso un array vacío. Usamos “validator”, función de validación, para verificar su tamaño mínimo.

• propObject: objeto, cuyo valor por defecto es un objeto vacío. En este caso, queremos tratar el objeto para retornar un valor, lo haremos mediante la propiedad computada “CompleteName”.

• propMultipleValue: permite número, texto o fecha, al incluirlos en un array de tipos permitidos.

Las propiedades recibidas en las “props” podemos utilizarlas directamente en la plantilla, inicializar variables del data o tratar el valor recibido por las props, en las propiedades computadas y retornar el valor tratado, como es el caso de “CompleteName”. Aquí tratamos el objeto recibido, retornando el nombre completo como valor. En caso de no querer tratar el valor recibido, simplemente asignamos el valor de la prop a su respectiva variable en el data.

En la plantilla mostramos los valores de estas variables del data, así como de la propiedad computada.

Finalmente, en “firstvue.html” instanciamos el componente con cada propiedad rellena como debería [3]. De modo que, si visualizamos la página en el navegador, visualizamos los valores correctamente [4].

Sin embargo, si no enviásemos la propiedad requerida, o no enviásemos elementos en el array, la consola del navegador mostraría los errores [5], sería lo esperado, al no superar la validación:

<my-props :prop-array=[] :prop-object=’{“Name”:”Ramón”, “LastName”:”Serrano Valero”, “Age”:34}’

prop-multiple-value=”25-10-1984” />