Vimos en el concepto anterior que una característica fundamental de Vue es la posibilidad de definir componentes y ser reutilizadas.
Una componente puede definir propiedades y pasarle valores a las mismas cuando definimos etiquetas:
<hola-mundo idioma="ingles"></hola-mundo>
En la etiqueta 'hola-mundo' pasamos la propiedad 'idioma' con el valor 'ingles'. Esto es lo que ya usamos en HTML para informar a la etiqueta valores que debe tener en cuenta.
Veamos ahora como una componente en Vue define y almacena el valor de la propiedad:
<!doctype html> <html> <head> <title>Prueba Vue</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> </head> <body> <div id="aplicacion"> <hola-mundo idioma="ingles"></hola-mundo> <hola-mundo idioma="castellano"></hola-mundo> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> Vue.component('hola-mundo', { props: ['idioma'], template: `<div> <p v-if="idioma=='castellano'">Hola mundo</p> <p v-if="idioma=='ingles'">Hello world</p> </div>` }) var app=new Vue({ el: '#aplicacion' }) </script> </body> </html>
Cuando declaramos una componente debemos definir una propiedad llamada 'props' y dentro de la misma un vector con todas las propiedades de dicha componente:
Vue.component('hola-mundo', { props: ['idioma'],
Luego en el template podemos analizar el valor almacenado en la propiedad y para nuestro ejemplo mostrar el mensaje en castellano o ingles:
template: `<div> <p v-if="idioma=='castellano'">Hola mundo</p> <p v-if="idioma=='ingles'">Hello world</p> </div>`
Recordar que siempre una componente en Vue debe tener un elemento HTML que englobe todos los otros (en nuestro ejemplo el div)
El resultado de ejecutar esta página es: