Vue.js
Componentes

Observaciones

Componente con ámbito (no global)

Manifestación

HTML

<script type="x-template" id="form-template">
    <label>{{inputLabel}} :</label>
  <input type="text" v-model="name" />
</script>

<div id="app">
  <h2>{{appName}}</h2>
  <form-component title="This is a form" v-bind:name="userName"></form-component>
</div>

JS

// Describe the form component
// Note: props is an array of attribute your component can take in entry.
// Note: With props you can pass static data('title') or dynamic data('userName').
// Note: When modifying 'name' property, you won't modify the parent variable, it is only descendent.
// Note: On a component, 'data' has to be a function that returns the data.
var formComponent = {
  template: '#form-template',
  props: ['title', 'name'],
  data: function() {
    return {
      inputLabel: 'Name'
    }
  }
};

// This vue has a private component, it is only available on its scope.
// Note: It would work the same if the vue was a component.
// Note: You can build a tree of components, but you have to start the root with a 'new Vue()'.
var vue = new Vue({
  el: '#app',
  data: {
    appName: 'Component Demo',
    userName: 'John Doe'
  },
  components: {
    'form-component': formComponent
  }
});

¿Qué son los componentes y cómo definir los componentes?

Los componentes en Vue son como widgets. Nos permiten escribir elementos personalizados reutilizables con el comportamiento deseado.

No son más que objetos que pueden contener cualquiera o todas las opciones que puede contener la raíz o cualquier instancia de Vue, incluida una plantilla HTML para representar.

Los componentes consisten en:

• Marca HTML: la plantilla del componente
• Estilos CSS: cómo se mostrará el marcado HTML
• Código JavaScript: los datos y el comportamiento.

Estos pueden escribirse en un archivo separado o como un solo archivo con la extensión .vue . A continuación hay ejemplos que muestran ambas formas:

.VUE - como un solo archivo para el componente

<style>  
    .hello-world-compoment{  
        color:#eeeeee;  
        background-color:#555555; 
    }  
</style>  

<template>
    <div class="hello-world-component">
        <p>{{message}}</p>
        <input @keyup.enter="changeName($event)"/>
    </div>
</template>

<script>
    export default{            
        props:[ /* to pass any data from the parent here... */ ],   
        events:{ /* event listeners go here */},
        ready(){
            this.name= "John";
        },
        data(){
           return{
              name:''
           }
        },
        computed:{
            message(){
                return "Hello from " + this.name;
            }
        },
        methods:{
            // this could be easily achieved by using v-model on the <input> field, but just to show a method doing it this way.
            changeName(e){
                this.name = e.target.value;
            }
        }  
    }
</script>  

Archivos separados

hello-world.js - el archivo JS para el objeto componente

export default{
    template:require('./hello-world.template.html'),
    props:[ /* to pass any data from the parent here... */ ],  
    events:{ /* event listeners go here */ },
    ready(){
        this.name="John";
    },
    data(){
        return{
            name:''
        }
    },
    computed:{
        message(){
            return "Hello World! from " + this.name;
        }
    },
    methods:{
        changeName(e){
            let name = e.target.value;
            this.name = name;
        }
    }
}  

hello-world.template.html

<div class="hello-world-component">
    <p>{{message}}</p>
    <input class="form-control input-sm" @keyup.enter="changeName($event)">
</div>  

hola-mundo.css

 .hello-world-compoment{  
    color:#eeeeee;  
    background-color:#555555; 
}    

Estos ejemplos utilizan la sintaxis de es2015, por lo que se necesitará a Babel para compilarlos en es5 para navegadores más antiguos.
Babel junto con Browserify + vueify o Webpack + vue-loader deberán compilar hello-world.vue .

Ahora que tenemos el componente hello-world definido, debemos registrarlo con Vue.

Esto se puede hacer de dos formas:

Registrarse como un componente global
En el archivo main.js (punto de entrada a la aplicación) podemos registrar cualquier componente globalmente con Vue.component :

import Vue from 'vue'; // Note that 'vue' in this case is a Node module installed with 'npm install Vue'
Vue.component('hello-world', require('./hello-world');  // global registeration

new Vue({
    el:'body',

    // Templates can be defined as inline strings, like so:
    template:'<div class="app-container"><hello-world></hello-world></div>'
});  

O regístrelo localmente dentro de un componente principal o componente raíz

import Vue from 'vue'; // Note that 'vue' in this case is a Node module installed with 'npm install Vue'
import HelloWorld from './hello-world.js';  

new Vue({
    el:'body',
    template:'<div class="app-container"><hello-world></hello-world></div>",

    components:{HelloWorld}  // local registeration
});  

Los componentes globales se pueden utilizar en cualquier lugar dentro de la aplicación Vue.

Los componentes locales solo están disponibles para su uso en el componente principal con el que están registrados.

Componente del fragmento
Puede obtener un error de consola que le dice que no puede hacer algo porque el suyo es un componente de fragmento . Para resolver este tipo de problema, simplemente ajuste su plantilla de componente dentro de una sola etiqueta, como un <div> .

Registro local de componentes.

Un componente se puede registrar global o localmente (enlazar a otro componente específico).

var Child = Vue.extend({
    // ...
})

var Parent = Vue.extend({
    template: '...',
    components: {
         'my-component': Child
    }
})

El nuevo componente () solo estará disponible dentro del alcance (plantilla) del componente principal.

Registro en línea

Puede ampliar y registrar un componente en un solo paso:

Vue.component('custom-component', {
    template: '<div>A custom component!</div>'
})

También cuando el componente está registrado localmente:

var Parent = Vue.extend({
    components: {
        'custom-component': {
            template: '<div>A custom component!</div>'
        }
    }
})

Registro de datos en componentes.

Pasar un objeto a la propiedad de data al registrar un componente causaría que todas las instancias del componente apunten a los mismos datos. Para resolver esto, necesitamos devolver data de una función.

var CustomComponent = Vue.extend({
    data: function () {
        return { a: 1 }
    }
})

Eventos

Una de las formas en que los componentes pueden comunicarse con sus ancestros / descendientes es a través de eventos de comunicación personalizados. Todas las instancias de Vue también son emisores e implementan una interfaz de eventos personalizada que facilita la comunicación dentro de un árbol de componentes. Podemos utilizar lo siguiente:

• $on : escucha los eventos emitidos por estos componentes ancestros o descendientes.
• $broadcast : emite un evento que se propaga hacia abajo a todos los descendientes.
• $dispatch : emite un evento que se activa primero en el componente y se propaga hacia arriba a todos los antepasados.
• $emit : activa un evento en uno mismo.

Por ejemplo, queremos ocultar un componente de botón específico dentro de un componente de formulario cuando se envía el formulario. En el elemento padre:

var FormComponent = Vue.extend({
  // ...
  components: {
    ButtonComponent
  },
  methods: {
    onSubmit () {
        this.$broadcast('submit-form')
    }
  }
})

En el elemento hijo:

var FormComponent = Vue.extend({
  // ...
  events: {
    'submit-form': function () {
        console.log('I should be hiding');
    }
  }
})

Algunas cosas para tener en mente:

• Cada vez que un evento encuentra un componente que lo escucha y se activa, se detendrá la propagación a menos que la función de devolución de llamada en este componente devuelva true .
• $dispatch() siempre activa primero el componente que lo ha emitido.
• Podemos pasar cualquier número de argumentos al controlador de eventos. Haciendo this.$broadcast('submit-form', this.formData, this.formStatus) nos permite acceder a estos argumentos como 'submit-form': function (formData, formStatus) {}