Vue.js
Компоненты

замечания

Компонент (не глобальный)

демонстрация

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
  }
});

Какие компоненты и как определить компоненты?

Компоненты в Vue похожи на виджеты. Они позволяют нам писать повторно используемые пользовательские элементы с желаемым поведением.

Они представляют собой объекты, которые могут содержать любые / все параметры, которые могут содержать корневой или любой экземпляр Vue, включая HTML-шаблон для рендеринга.

Компоненты состоят из:

• HTML-разметка: шаблон компонента
• Стили CSS: как будет отображаться разметка HTML
• Код JavaScript: данные и поведение

Каждый из них может быть записан в отдельный файл или в виде одного файла с расширением .vue . Ниже приведены примеры, показывающие оба способа:

.VUE - как отдельный файл для компонента

<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>  

Отдельные файлы

hello-world.js - файл JS для объекта компонента

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;
        }
    }
}  

привет-world.template.html

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

привет-world.css

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

В этих примерах используется синтаксис es2015, поэтому Babel потребуется для их компиляции в es5 для старых браузеров.
Для компиляции hello-world.vue потребуется Babel вместе с Browserify + vueify или Webpack + vue-loader .

Теперь, когда мы определили компонент hello-world , мы должны зарегистрировать его с помощью Vue.

Это можно сделать двумя способами:

Зарегистрируйтесь как глобальный компонент
В файле main.js (точка входа в приложение) мы можем зарегистрировать любой компонент по всему миру с помощью 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>'
});  

Или зарегистрируйте его локально в родительском компоненте или корневом компоненте

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
});  

Глобальные компоненты могут использоваться в любом месте приложения Vue.

Локальные компоненты доступны только для использования в родительском компоненте, с которым они зарегистрированы.

Компонент фрагмента
Вы можете получить консольную ошибку, сообщающую вам, что вы не можете что-то сделать, потому что ваш компонент является фрагментом . Чтобы решить эту проблему, просто оберните шаблон компонента внутри одного тега, например, <div> .

Локальная регистрация компонентов

Компонент может быть зарегистрирован либо глобально, либо локально (привязка к другому конкретному компоненту).

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

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

Новый компонент () будет доступен только внутри области (шаблона) родительского компонента.

Встроенная регистрация

Вы можете продлить и зарегистрировать компонент за один шаг:

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

Также, когда компонент зарегистрирован локально:

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

Регистрация данных в компонентах

Передача объекта в свойство data при регистрации компонента приведет к тому, что все экземпляры компонента будут указывать на одни и те же данные. Чтобы решить эту проблему, нам нужно вернуть data из функции.

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

События

Одним из способов взаимодействия компонентов со своими предками / потомками является использование пользовательских событий связи. Все экземпляры Vue также являются эмиттерами и реализуют настраиваемый интерфейс событий, который облегчает обмен данными внутри дерева компонентов. Мы можем использовать следующее:

• $on : Слушайте события, испускаемые этими компонентами предков или потомков.
• $broadcast : Выдает событие, распространяющееся вниз ко всем потомкам.
• $dispatch : испускает событие, которое сначала запускает сам компонент и распространяется до всех предков.
• $emit : запускает событие для себя.

Например, мы хотим скрыть конкретный компонент кнопки внутри компонента формы, когда форма отправляется. На родительском элементе:

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

О дочернем элементе:

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

Некоторые вещи нужно иметь в виду:

• Всякий раз , когда событие находит компонент , который слушает его и получает срабатывает, он остановится распространяющимся , если функция обратного вызов в этом компоненте не возвращает true .
• $dispatch() всегда запускает сначала компонент, который его испустил.
• Мы можем передать любое количество аргументов обработчику событий. Выполнение this.$broadcast('submit-form', this.formData, this.formStatus) позволяет нам получить доступ к этим аргументам, таким как 'submit-form': function (formData, formStatus) {}