Веб-компоненты и как они взаимодействуют в Vue и Vuex

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

ВьюБудучи прогрессивной структурой, похож на Angular с точки зрения синтаксиса. Чтобы понять, какие компоненты находятся в Vue и где Vuex входит в картину, сначала рассмотрим, как Vue предоставляет возможность обмена данными между компонентами.

Что такое компонент и почему мы должны обмениваться данными между компонентами?

Если вы знакомы с Угловые директивытогда это похоже на простую директиву, в которой мы можем написать собственную логику, предоставить шаблон (шаблон) и вызвать этот компонент (вместо регистрации компонента в корневом экземпляре).

Пример :

//Button directive component
Vue.component('button-directive', {
  data: function () {
    return {
    counterValue: 0
    }
  }
  template: '<span>-Button Counter-span><button v-on:click="counterValue++">{{ count }}button>'
});
<div id="directive">
<button-directive>button-directive>
div>
В приведенном выше примере Кнопка директивы является компонентом, который включает в себя логику для увеличения значения счетчика кнопки, а также шаблон, который будет фактически отображать кнопку. Эти компоненты могут использоваться совместно с другими компонентами, если они объявлены на верхнем уровне. Чтобы узнать больше о компонентах, посетите Компонент Vue документация.

В приведенном выше примере показан один компонент, но что если несколько компонентов с родительскими и дочерними компонентами совместно используют один и тот же экземпляр друг с другом? Совместное использование между компонентами (дочерний компонент и родительский компонент) происходит с использованием различных методов.

1. Реквизит и события

Реквизиты позволяют передавать любой тип данных дочернему компоненту и контролировать, какие данные получает ваш компонент. Это позволяет дочернему компоненту обновляться всякий раз, когда изменяются данные родителя. Для получения дополнительной информации посетите Vue реквизит документация. События — это способ передачи обновленной информации от дочернего компонента к родительскому компоненту. События предоставляют способ информировать ваши родительские компоненты об изменениях в детях.

Пример:

<my-component @eventExample="parentHandler">my-component>

Здесь мой компонент является дочерним компонентом с EventExample который вызовет любые изменения (внутренне, он использует — v-на: EventExample ).

Мероприятие может быть запущен в аналогичном формате:


export default {
  methods: {
    fireEvent() {
      this.$emit('eventExample', eventValueOne);
    }
  }
}

И реквизиты, и события могут использоваться вместе с v-modal для двухсторонней привязки, где изменение входного значения вызовет triggerEvent метод.
Пример: