Componentes de Vue.js

Los componentes son unidades individuales e independientes de una interfaz. Pueden tener su propio estado, marcado y estilo.

Los componentes son unidades individuales e independientes de una interfaz. Pueden tener su propio estado, marcado y estilo.

Cómo utilizar los componentes

Los componentes de Vue se pueden definir de 4 formas principales.

Hablemos en código.

El primero es:

new Vue({
  /* options */
})

El segundo es:

Vue.component('component-name', {
  /* options */
})

El tercero es mediante el uso de componentes locales: componentes a los que solo se puede acceder mediante un componente específico y que no están disponibles en ningún otro lugar (excelente para la encapsulación).

El cuarto está en.vuearchivos, también llamadosComponentes de un solo archivo.

Vamos a sumergirnos en las primeras 3 formas en detalle.

Usandonew Vue()oVue.component()es la forma estándar de usar Vue cuando está creando una aplicación que no es una aplicación de página única (SPA), sino que usa Vue.js solo en algunas páginas, como en un formulario de contacto o en el carrito de compras. O tal vez Vue se usa en todas las páginas, pero el servidor está representando el diseño y usted entrega el HTML al cliente, que luego carga la aplicación Vue que usted construye.

En un SPA, donde es Vue quien construye el HTML, es más común usar componentes de un solo archivo, ya que son más convenientes.

Usted crea una instancia de Vue montándolo en un elemento DOM. Si tienes un<div id="app"></div>etiqueta, usará:

new Vue({ el: '#app' })

Un componente inicializado connew Vueno tiene un nombre de etiqueta correspondiente, por lo que suele ser el componente principal del contenedor.

Otros componentes usados en la aplicación se inicializan usandoVue.component(). Dicho componente le permite definir una etiqueta, con la que puede incrustar el componente varias veces en la aplicación y especificar la salida del componente en eltemplatepropiedad:

<div id="app">
  <user-name name="Flavio"></user-name>
</div>
Vue.component('user-name', {
  props: ['name'],
  template: '<p>Hi {{ name }}</p>'
})

new Vue({ el: ‘#app’ })

Tech Wiki Online!