Javascript-фреймворк vue.js: особенности и примеры реализации

Соглашения по именованию компонентов

При регистрации компонентов или входных параметров, можно использовать kebab-case, camelCase или PascalCase.

В HTML-шаблонах, придется использовать эквивалентный kebab-case:

При использовании строковых шаблонов ограничения регистронезависимости HTML не действуют. Поэтому даже в шаблоне можно указывать компоненты используя:

• kebab-case
• camelCase или kebab-case, если компонент объявлен используя camelCase
• kebab-case, camelCase или PascalCase, если компонент объявлен используя PascalCase

PascalCase является наиболее универсальным соглашением объявления, а kebab-case наиболее универсальным соглашением использования.
Если компонент не содержит слотов, его можно сделать самозакрывающимся, указав / после имени:

Параметры, переданные объекту Vue

При инициализации объекта Vue вы передаете объект:

Этот объект принимает ряд свойств.

Свойство	Описание
	позволяет передавать набор реактивных данных, которые будут использоваться приложением Vue. Все реактивные свойства должны быть добавлены во время инициализации, вы не можете добавить новые позже.
	это набор атрибутов, которые предоставляются родительским компонентам в качестве входных данных.
	данные по умолчанию для реквизита. Полезно только во время тестирования
	набор методов, определенных в экземпляре Vue
	как методы, но кешируются внутри
	позволяет просматривать свойства и вызывать функцию при их изменении

Пример определения данных, методов и вычисляемых свойств:

ДОМ

• устанавливает элемент DOM, на котором монтируется экземпляр. Это может быть селектор CSS или HTMLElement.
• шаблон, представленный в виде строки, который заменит смонтированный элемент
• в качестве альтернативы для определения шаблона вы можете определить шаблон с помощью функции рендеринга
• установить альтернативный выход, когда функция, прикрепленная ктерпит неудачу

Ресурсы экземпляра Vue

• набор директив для связи с экземпляром Vue
• набор фильтров для связи с экземпляром Vue
• набор компонентов, которые нужно связать с экземпляром Vue

Другие параметры объекта Vue

• установка имени для компонента позволяет вам вызывать его, что полезно при отладке или когда вам нужно рекурсивно добавить компонент в его шаблон
• если true, устанавливает компонент без состояния (нет) и без экземпляров (нет), что делает его более легким
• позволяет настроить свойство, используемое в событиях, полезно, например, при взаимодействии с формами
• по умолчанию false. Если установлено значение true, сохраняет HTML-комментарии, помещенные в шаблоны.

Vuetify

Vuetify — наверно самая популярная библиотека для быстрого прототипирования. В данный момент на Github эта библиотека насчитывает 28000 звезд. В качестве дизайн системы данная библиотека использует дизайн систему Google Material Design. На борту библиотека имеет около 80 готовых компонентов, в которых поможет разобраться документация. Документация версии 1.5.x частично переведена на русский, начиная с версии 2.3.x документация доступна пока только на английском

Важно отметить, что библиотека имеет локализации включая русский и украинский языки. У Vuetify  есть своя адаптивная сетка на 12 колонок аналогичная Bootstrap

Так же присутствует поддержка SASS стилей + есть возможность переопределить глобальные значения в файле конфигурации webpack. Присутствует три набора иконок: Material Design и две версии Font Awesome — 4 и 5.

Выражения в компонентах должны быть простыми

Вы можете использовать инлайн-выражения в шаблонах Vue — это самые обычные Javascript выражения. Они дают максимальную свободу и мощность, однако из-за этого они могут стать слишком сложными. Не злоупотребляйте этим — оставляйте инлайн-выражения простыми.

Почему?

• Сложные выражения сложнее прочесть и понять.
• Инлайн-выражения нельзя переиспользовать, это очевидно, ведет дублированию кода и ухудшению его качества.
• Редакторы и IDE обычно не могут парсить такие выражения, а значит у вас не будет автодополнения и валидации.

Как?

Простое правило — если код Javascript инлайн-выражения становится слишком сложным — выносите его как отдельный метод в блок methods или computed-свойство, соответственно в блок computed.

<!-- правильно -->
<template>
  <h1>
    {{ `${year}-${month}` }}
  </h1>
</template>
<script type="text/javascript">
  export default {
    computed: {
      month() {
        return this.twoDigits((new Date()).getUTCMonth() + 1);
      },
      year() {
        return (new Date()).getUTCFullYear();
      }
    },
    methods: {
      twoDigits(num) {
        return ('0' + num).slice(-2);
      }
    },
  };
</script>

<!-- неправильно -->
<template>
  <h1>
    {{ `${(new Date()).getUTCFullYear()}-${('0' + ((new Date()).getUTCMonth()+1)).slice(-2)}` }}
  </h1>
</template>

Как создавать компоненты во Vue

Компоненты — это многократно используемые экземпляры Vue. Существуют различные способы создания компонентов в приложении. Например, для регистрации глобального компонента можно использовать метод Vue.component:

Vue.component('my-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: `<div>` count `</div>`
})

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

Имя компонента — my-counter. Его можно использовать следующим образом:

<div id="app">
  <my-counter></my-counter>
</div>

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

Есть несколько способов определения шаблон компонента. В предыдущем примере используется литерал объекта. Но мы также можем использовать тег <script>, встроенный в DOM шаблона.

Однофайловые компоненты

В более сложных проектах глобальные компоненты становятся громоздкими. В таких случаях лучше использовать однофайловые компонентов. Это отдельные файлы с расширением .vue, которые включают в себя разделы <template>, <script> и <style>.

Компонент App может выглядеть следующим образом:

<template>
  <div id="app">
    <my-counter></my-counter>
  </div>
</template>

<script>
import myCounter from './components/myCounter.vue'

export default {
  name: 'app',
  components: { myCounter }
}
</script>

<style></style>

А  компонент MyCounter может выглядеть так:

<template>
  <div>` count `</div>
</template>

<script>
export default {
  name: 'my-counter',
  data() {
    return {
      count: 0
    }
  }
}
</script>

<style></style>

Однофайловые компоненты можно импортировать и использовать непосредственно в тех компонентах, где они необходимы.

В этом руководстве я представлю все примеры с использованием метода регистрации компонента Vue.component().

Понимание хуков уничтожения (разрушение)

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

срабатывает прямо перед уничтожением. Ваш компонент все еще присутствует и полностью функционален.

Используйте , если вам нужно очистить события или реактивные подписки:

ExampleComponent.vue

Этот код вначале сохраняет . При запуске хука код регистрирует сообщение и удаляет свойство .

Когда вы достигнете хука , от вашего компонента уже практически ничего не останется. Все, что было к нему прикреплено, будет уничтожено.

Используйте , если вам необходимо провести заключительную очистку или сообщить удаленному серверу об уничтожении компонента:

ExampleComponent.vue

Вначале этот сниппет импортирует . При запуске хука этот код регистрирует сообщение . Остатки компонента регистрируются в консоли, и службе передается сообщение .

Мы завершили обзор хуков жизненного цикла Vue.js.

Тестирование Vuex в компонентах

До этого раздела мы писали тесты на компоненты и на составляющие хранилища в изоляции. Давайте рассмотрим каким образом можно протестировать getters, mutations и actions в рамках компонента, подключенного к store.

Так как у нас только один компонент подключен к store — это App.vue, то и тестировать будем его. 

Начнем с getters. Есть три способа чтобы протестировать работу getters.

1. Создать локальный экземпляр vue, подключить к нему store с нашим стейтом

2. Замокать store, указав ему нужные getters.

3. Сделать mock непосредственно самого gettres при рендеринге компонента.

Рассмотрим первый способ. Для того чтобы создать локальный экземпляр Vue в @vue/test-utils есть функция createLocalVue. Импортируем ее и создадим локальный экземпляр:

Как видно из простого теста, где мы просто делаем shallow рендеринг нашего компонента вторым параметром мы передали как раз локальный экземпляр vue и наш store в виде объекта.

Далее мы можем например проверить, что наш компонент AppHeader содержит правильные значения в своих аттрибутах.

Второй вариант это замокать сам store. Например мы могли бы сделать так:

И третим способом мы могли бы передать в  shallow рендеринг компонента непосредственно функцию todayCar, как computed.

Вот мы рассмотрели три основных способа протестировать геттеры. 

А что же там с мутациями и действиями? Да в принципе мы можем использовать первые два способа из геттеров. Т.е. либо подключаем локальный store или мокаем его. Алгоритм тестирования действий  в рамках компонентов не отличается по сути от тестирования его в изоляции. Нам необходимо проверить, что при клике на какой-нибудь элемент, обработчиком которого является наше действие вызывался соответствующий коммит с нужными данными.

На мой субъективный взгляд для больших компонентов, которые подключаются к vuex и имеют множество геттеров, и действий предпочтительнее использовать способ с созданием локального экземпляра vue, подключить к нему store с нашим стейтом. А для небольших мокать store.

# Композиция

Proppy — Functional props composition for components

Официальная документация — Разбиение приложения на компоненты

Расширение компонента

Если вы хотите расширить один Vue-компонент, можно поступить следующим образом:

• Расширение компонентов VueJS

• Официальная документация — mixins
• Практическое использование компонентов и примисей в Vue JS

Слоты (по умолчанию)

• Понимание слотов компонентов с помощью Vue.js
• Составление пользовательских элементов с помощью слотов и именованными слотами
• Написание абстрактных компонентов во Vue.js
  ( перевод)

BaseLayout.vue

App.vue

Официальная документация — Именованные слоты

Слоты с ограниченной областью видимости

• Разбираемся со слотами с ограниченной областью видимости
• Понимание слотов с ограниченной областью видимости во Vue.js
• Слоты с ограниченной областью видимости компонента во Vue.js
• Трюк к пониманию слотов с ограниченной областью видимости во Vue.js
• Мощность слотов в Vue
• Создание компонента, управляемого с клавиатуры, списка с помощью Vue.js и слотов с ограниченной областью видимости

Render Props

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

С однофайловым компонентом

С использованием

• Официальная документация — Render Functions & JSX
• Использование рендеринга входных параметров в Vue
• Использование рендеринга входных параметров Vue.js!

# Условный рендеринг компонента

Директивы ( / / / )

Использование и

Использование

Использование

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

Обратите внимание, что элемент фактические не будет отображаться в DOM. Это как невидимая обёртка

Render-функция или JSX

Если вы используете JSX в своем Vue-приложении, то можете применять все техники, например использования выражения и , а также тернарные и логические операторы.

Использование выражения

Использование выражения

Или можно использовать сопоставление с помощью объекта для упрощения выражений

Использование тернарного оператора

Использование логического оператора

Vuex — наш менеджер состояний

Vuex — это шаблон управления состоянием Vue для приложений Vue.js.

Думайте о нем как о централизованном хранилище данных или «единственном источнике правды».

Vuex действует как единое центральное хранилище для всех компонентов в одном приложении. Кроме того, отслеживает все методы (или мутации) и помогает вам управлять всеми данными в вашем веб-приложении.

Если вы используете Vue Devtools, вы можете использовать их интересные функции, такие как отслеживание или просмотр всех данных, хранящихся в Vuex.

Здесь вы увидите запущенные методы, какие данные и методы которые в данный момент хранятся в хранилище Vuex, и сможете вернуться, чтобы проследить ваши шаги, изменить текущие данные и т. д.

Хотя веб-приложение несколько усложняется, добавлением накладных расходов, оно очень помогает разделить всю логику в один файл, предоставляя доступ к нескольким независимым компонентам и многому другому.

Давайте посмотрим, как я использовал его в реальной обстановке:

Снова довольно просто. Мы загружаем все функции и данные в файл store.js, который станет нашим «Единственным источником правды». Затем для каждого необходимого компонента мы загрузим нужные нам части.

Преимущества Vue.js

Адаптивность Vue.js — это то, что в первую очередь привлекает к нему разработчиков и делает работу с ним приятной и более эффективной. Vue.js контролирует фундаментальный уровень MVC, обеспечивая лучший пользовательский интерфейс и легкую интеграцию приложения.

Чтобы облегчить понимание фреймворка, приведем некоторые из наиболее важных преимуществ его использования в качестве платформы разработки.

1. Фреймворк Vue.js основан на шаблоне MVVM (Model-View-ViewModel), производном от классического шаблона Model-View-Controller (MVC). Его появление способствовало разделению интерфейсной разработки графического UI пользователя и внутренней бизнес-логики, что значительно повышает эффективность создания приложений. Ядро MVVM — уровень ViewModel, чем-то похожий на преобразователь значений, отвечающий за изменение объектов данных в модели.
2. Простое использование и легкая интеграция. Это один из самых удобных для новичков инструмент, с низкой кривой обучения по сравнению с другими фреймворками. Также он будет интуитивно понятен разработчикам, ранее работавшим с jQuery и Angular. А еще его просто интегрировать в другие библиотеки или использовать как отдельный проект.
3. Состоит из компонентов. Компонент — важная часть Vue.js. Это блоки кода, которые можно использовать многократно, включающие в себя как описание интерфейса приложения, так и реализацию его возможностей. Они нужны разработчику для создания легко поддерживаемой, модульной базы кода для создания крупномасштабных программ.
4. Производительность. Vue.js — небольшой и быстрый фреймворк с точки зрения производительности, что делает его одним из важнейших инструментов для разработки мобильных приложений.
5. Реактивная привязка данных. О ней мы уже говорили в начале. Каждый раз при изменении данных DOM обновляется автоматически.
6. Virtual DOM. Мир Vue.js вращается вокруг DOM. По сути, он служит интерфейсом между скриптами и разметкой, что упрощает отправку и получение данных из HTML. При изменении элементов CSS, в некоторых случаях необходимо перестраивать все дерево. Vue.js создает копию в виртуальной DOM, а не в DOM браузера. За счет устранения необходимости в дублировании информации повышается общая производительность.

Однонаправленный поток данных

Входные параметры однонаправленно посылают данные от родительского компонента к потомкам. Изменение копмонента-родителя передается потомку, но не наоборот. Если бы потомки могли менять состояние родителя, изменять структуру потомков данных было бы трудно. Однонаправленная отправка данных исключает подобное.

Также, при любом изменении родительского компонента каждый входной параметр потомка обновляется до актуального значения. Поэтому не нужно изменять значения входных параметров внутри компонента расчитывая на их сохранность. 

Новички пытаются изменить значение входного параметра в двух случаях:

1. Если параметр нужен только для передачи потомку начального значения, после чего переменная планируется использоваться как локальная.
2. Если значению, которое передаётся как параметр, требуется дальнейшая обработка.

Правильное решение следующее:

1. Объявить локальную переменную, принимающу. значение входного параметра при инициализации:

2. Определить вычисляемое свойство, основанное на значении входного параметра:

Регистрация компонента

Так как компоненты независимы, то в какой-то момент нужно “рассказывать” одному о существовании другого.

Это можно сделать зарегистрировав компонент: глобально или локально. При первом варианте — компонент регистрируется после подключения Vue, но до создания нового экземпляра :

// ... где-то раньше подключаем Vue.jsVue.component('test-component', {    // настройки компонента});// ... где-то потом будет new Vue({…});

Второй вариант — локальная регистрация. В этом случае вызов компонента будет доступен только в области видимости своего родителя. В секции перечисляем какие используем компоненты и под какими именами:

<script>// Подключаем файл компонентаimport testComponent from './test-component.vue';// или можно такvar testComponent = require('./test-component.vue');export default {  ...  // перечисляем используемые компоненты  components: {    'test-component': testComponent,    'another-test': ... // и используем <another-test> в шаблоне  }  ...}</script>

С ES6 можно немного сократить запись:

import testComponent from './test-component.vue';...components: {    testComponent}...

А если использовать динамические импорты webpack, то ещё короче:

components: {    testComponent: () => import('./test-component.vue')}

И не будет собираться два столбика импортов и регистраций:

// былоimport component1 from './component1.vue';import component2 from './component2.vue';import component3 from './component3.vue';import component4 from './component4.vue';...components: {  component1,  component2,  component3,  component4,  ...}// сталоcomponents: {  component1: () => import('./component1.vue'),  component2: () => import('./component2.vue'),  component3: () => import('./component3.vue'),  component4: () => import('./component4.vue'),  ...}

Структура компонента

Добейтесь, чтобы описание компонента было понятным и логичным.

Почему?

• Экспортируемый объект (речь о файле или блоке в файле) компонента, построенный в каждом случае по одинаковым принципам, ускорит работу с ним других разработчиков и будет служить внутренним стандартом.
• Если свойства будут расположены по алфавиту их будет легче просмотреть и найти нужное.
• Группировка сходных свойств также облегчает чтение и ориентирование в коде, например props, data, computed; далее watch, и methods; далее lifecycle methods, и тд.
• Предпочтительный порядок расположения блоков в файле: template, потом script и далее style. Потому что большую часть времени любой разработчик проводит в написании HTML и далее JavaScript.

Как?

Структура компонента, описание свойств в логичном порядке:

<template lang="html">
  <div class="Ranger__Wrapper">
    <!-- ... -->
  </div>
</template>

<script type="text/javascript">
  export default {
    // обязательно не забываем имя к.
    name: 'RangeSlider',
    // можем использовать композицию уже существующих к.
    extends: {},
    // перечисление свойств и переменных
    props: {
  bar: {}, // еще лучше если по-алфавиту
  foo: {},
  fooBar: {},
  },
    data() {},
    computed: {},
    // когда внутри используются другие к.
    components: {},
    // методы
    watch: {},
    methods: {},
    // методы жизненного цикла к.
    beforeCreate() {},
    mounted() {},
};
</script>

<style scoped>
  .Ranger__Wrapper { /* ... */ }
</style>

Понимание хуков монтирования (вставка DOM)

Хуки монтирования используются чаще всего. Они обеспечивают мгновенный доступ к компоненту до и после первого рендеринг. Однако они не выполняются во время рендеринга на стороне сервера.

Используйте хуки монтирования, если вам требуется получить доступ или изменить DOM вашего компонента непосредственно до или после начального рендеринга.

Не используйте хуки монтирования, если вам требуется доставить данные компонента при инициализации.

Примечание. Используйте для этой цели (или и для компонентов ). В частности, если вам нужны эти данные при рендеринге на стороне сервера.

Хук запускается до начального рендеринга и после компиляции шаблона или функций рендеринга:

ExampleComponent.vue

В этом примере при запуске хука код регистрирует сообщение: .

В хуке hook дает вам полный доступ к реактивному компоненту, шаблонам и модели DOM после рендеринга (через ).

Используйте для модификации DOM, особенно при интеграции с другими библиотеками, кроме :

ExampleComponent.vue

В этом примере при запуске хука код регистрирует сообщение . Также регистрируется сообщение ().

В этом разделе мы изучили сценарии использования хуков монтирования. На следующем шаге мы рассмотрим несколько примеров использования хуков обновления.

Структура компонента

Обратите внимание на следующий компонент:

Каждый компонент Vue может содержать шаблон, скрипт и раздел стилей.

• Шаблон — это видимое содержимое компонента
• Скрипт — это логика компонента
• Стили, как вы уже догадались, — это стили шаблона.

Шаблон

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

Сценарий

В теге скрипта мы пишем логику для этого компонента. В этом компоненте у нас есть только свойство , потому что этот компонент не является динамическим, это не что иное, как оболочка вокруг нашего представления маршрутизатора.

Стили

Здесь мы можем написать стили для шаблона. Стиль может быть ограниченным или глобальным. Область видимости стиль пишется так: . Этот тип стиля влияет только на шаблон этого компонента и корневой элемент дочерних компонентов, поэтому стиль не может попасть в другой компонент. В противоположность этому стили без области видимости будут совместно использоваться компонентами.

vite.config.jsСкопировать ссылку

Мы должны переименовать наш файл с конфигурацией сборки с  на .

В начале файла нужно указать следующее:

Чтобы сделать миграцию на Vite максимально прозрачной для вашей команды разработчиков, давайте оставим тот же порт , который и был:

Все доступные опции для конфигурации можно .

aliasСкопировать ссылку

Если вы используете псевдонимы Webpack для импортов в файлах вашего проекта, мы должны переопределить их:

Для пользователей WebStorm: при использовании Webpack вам достаточно было прописать в настройках IDE путь до файла с конфигурацией Webpack (для Vue CLI это был путь до базового файла Webpack: ) и WebStorm магическим образом подхватывал псевдоним , что позволяло очень просто обращаться к библиотекам.

Пока WebStorm не умеет парсить , и мы должны помочь ему, прописав настройки псевдонимов вручную в :

Это всё, что вы должны сделать

Децентрализованное описание роутов — tidyroutes

Этот подход позволяет не писать одно огромное дерево всех роутов. Этот конфиг действительно может разрастись в сложном приложении, а описывать каждый роут по месту декларации новой страницы или нового компонента.

//  foo.js
import VueTidyRoutes from 'vue-tidyroutes';
const Component1 = {
data() {
},
props ‘id’
template '<div><h2>Component1</h2></div>'
};
VueTidyRoutes.route('/component1/id', {
   name 'component1',
   component Component1,
  props true
});

export default Component1;

И далее подключаем всё в месте инициализации приложения.

//  main.js
import VueTidyRoutes from 'vue-tidyroutes';
Vue.use(VueRouter)
const router = new VueRouter({
   routes VueTidyRoutes.export()
})

Надеюсь, вам понравился этот обзор! Напишите, какими способами управления отображением компонентов в Vue пользуетесь вы.

Композиция компонентов

Компоненты взаимодействуют между друг другом, выстраивая иерархические отношения, в которых каждый компонент-родитель ссылается на компонент-потомок в собственном шаблоне. Это удобно для коммуникации компонентов между собой, для передачи данных из родителя к потомку и уведомления родителя о событиях происходящих с потомком. Заданный интерфейс взаимодействия между компонентами сводится к минимуму и такой подход обеспечивает написание и анализ кода каждого компонента в условиях относительной изоляции. Все это делает поддержку простой и облегчает повторное использование компонентов.

Иерерхические отношения Vue выстраиваются в следующем виде: входные парметры — вниз, события — вверх (props down, events up). Родительский компонент передает данные компоненту потомку через входные параметры, компонент потомок присылает уведомление родителю с помощью событий.

В чем подвох?

Если у вас есть опыт работы с Vue, то есть две большие темы, которые вам необходимо изучить для успешной разработки в NativeScript-Vue.

• Работа с NativeScript CLI: NativeScript — это проект для разработки приложений для iOS и Android, а не для веб-приложений. Вам понадобится изучить несколько команд в NativeScript CLI и основы работы с iOS-симуляторами и виртуальными устройствами Android (Android Virtual Devices).

• Изучение NativeScript UI-компонентов: Так как NativeScript использует нативные визуальные компоненты, HTML-элементы, такие как и , не существуют в NativeScript. Вместо этого вам необхоимо изучить новый набор компонентов, который вы сможете использовать для отображения визуальных интерфейсов.

Но не стоит волноваться. Несмотря на то, что для работы с NativeScript-Vue требуется изучение, вы обнаружите, что это намного легче, чем изучение iOS или Android с нуля. В конце концов, вы все равно будете писать свой исходный код на JavaScript и Vue.

BootstrapVue

Старый добрый Bootstrap перебрался на Vue. BootstrapVue основан на стилях Bootstrap4 + из него убрали jQuery, переделали и дополнили js компоненты. Документация на английском языке. Дизайн система имеет на борту более чем 85 переиспользуемых компонентов, 45 плагинов, несколько директив и 1100+ иконок. К сожалению локализаций у библиотеки нет. Так же из минусов можно отметить отсутствие полноценной валидации форм поэтому её придется заменять сторонними плагинами. Плюс библиотеки в том что она достаточно легковесная — после сборки проекта файлы весят почти в два раза меньше чем файлы Ant Design.

# Создание вашего первого графика

Вам необходимо импортировать базовый компонент, а затем расширить его. Это даёт больше гибкости при работе с различными данными. Однако, ваш компонент не может быть переиспользован таким образом.

Вы можете импортировать весь пакет или каждый модуль отдельно. Потом вам нужно использовать или . Далее, в хуке , вызовите . Это создаст экземпляр вашего объекта.

TIP

Вы можете использовать или или

Метод предоставляется компонентом и принимает два параметра. Об являются . Первый используется для данных вашего графика, а второй — как объект опций.

Со структурой этих объектов можете ознакомиться в

События

: «События, генерируемые через или , отправляются как нативные в собственном элементе. Дополнительные аргументы события будут представлены в виде массива в объекте CustomEvent в качестве его свойства ».

Давайте добавим базовую отправку события из нашего компонента, которое будет запускать . В Vue компоненте обновите наш блок скрипта следующим образом:

Основное изменение, которое мы здесь вносим, — это добавление (также доступно без импорта, аналогично defineProps), чтобы определять, какие события делает этот компонент. Затем мы начинаем использовать это в нашем setInterval, чтобы выдать новую дату как событие.

В нашем мы добавим прослушиватель событий в наш веб-компонент.

Благодаря этому, всякий раз, когда первый компонент генерирует событие , мы сможем его прослушать и действовать соответствующим образом. Отлично!

Подведя итог

В общем, Vue.js может похвастаться рядом замечательных функций, делающих его идеальным для всех, кто хочет начать работу с JS-фреймворками, а также идеален для тех, кто хочет перейти с React или Angular.

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

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

Итак, прежде чем принять решение и начать работу с Vue, не торопитесь и проведите дополнительное исследование. Посмотрите, как фреймворк выдержит ваш предполагаемый проект. Уточните свои потребности и сравните их с тем, что предлагает Vue.

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

Заключение

В этом материале вы увидели, как происходит взаимодействие между компонентами React и какими способами можно этого достичь:

• Родитель-наследник,
• Наследник-Родитель.

В первом разделе вы увидели использование props и render props, они работают с помощью HTML-подобных атрибутов. Context использует центральное хранилище, которое родитель и потомки могут как читать, так и обновлять. React-Redux и Redux делают то же самое, что и Context, компоненты выполняют чтение/запись из центрального хранилища.

Для дальнейшего освоения React вам может быть полезен данный материал.

Перевод статьи React: Communication Between Components