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: