Основы компонентов

Базовый пример

Пример компонента Vue приведен ниже:

// this defines a new component called button-counter
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">I was clicked me {{ count }} times.</button>'
})

Компоненты - это повторно используемые компоненты Vue с именем: в приведенном выше случае <button-counter>. Мы можем компонент как пользовательский элемент внутри корневого экземпляра Vue, который был создан с новым Vue:

HTML

<div id="demo">
  <button-counter></button-counter>
</div>

JS

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

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

Повторное использование компонентов

Компоненты могут использоваться столько раз, сколько мы хотим:

<div id="demo">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>

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

данные должны быть функцией

В приведенном выше определении компонента <button-counter> обратите внимание, что данные непосредственно не предоставили объект, например так:

data: {
  count: 0
}

Скорее, опция данных компонента должна быть функцией, чтобы каждый экземпляр поддерживал независимую копию возвращенного объекта данных:

data: function () {
  return {
    count: 0
  }
}

Если позднее у нас не было правила, мы запустим изменение данных всех других экземпляров.

Организация компонентов

Приложения обычно организованы в виде дерева вложенных компонентов:

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

Чтобы использовать эти компоненты, вы должны зарегистрировать их. Эта регистрация может быть либо глобально, либо локально. Для глобальной регистрации синтаксис:

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

Передача данных в дочерние компоненты с помощью реквизита

Компоненты бесполезны, если мы не можем передать им данные. Для передачи данных мы используем реквизит. Реквизиты - это пользовательские атрибуты, которые вы можете зарегистрировать в компоненте. Когда мы передаем значение в атрибут prop, оно становится свойством в экземпляре этого компонента:

Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})

Компонент может иметь более одной опоры, и любой может быть передан любой опоре.

Когда мы регистрируем реквизит, мы можем передать ему данные как пользовательский атрибут:>

<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>

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

new Vue({
  el: '#blog-post-demo',
  data: {
    posts: [
      { id: 1, title: 'My journey with Vue' },
      { id: 2, title: 'Blogging with Vue' },
      { id: 3, title: 'Why Vue is so fun' }
    ]
  }
})

А затем отрендерить компонент для каждого сообщения:

<blog-post
  v-for="post in posts"
  v-bind:key="post.id"
  v-bind:title="post.title"
>>/blog-post>

Мы всегда можем использовать директиву v-bind для динамической передачи реквизита.

Единственный корневой элемент

Когда мы создаем компонент <blog-post>, наш шаблон будет не только содержать заголовок.

Он должен включать как минимум содержание сообщений. Но бегущий фрагмент ниже:

<h3>{{ title }}</h3>
<div v-html="content"></div>

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

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

<blog-post
  v-for="post in posts"
  v-bind:key="post.id"
  v-bind:post="post"
></blog-post>
Vue.component('blog-post', {
  props: ['post'],
  template: `
    <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <div v-html="post.content"></div>
    </div>
})

Прослушивание событий дочерних компонентов

В компоненте есть некоторые функции, которые требуют обратной связи с родителем. Например, мы можем поддержать функцию, добавив свойство данных postFontSize в родительский объект:

new Vue({
  el: '#blog-posts-events-demo',
  data: {
    posts: [/* ... */],
    postFontSize: 1
  }
})

Затем это можно использовать в шаблоне для управления размером шрифта в блоге:

<div id="blog-posts-events-demo">
  <div :style="{ fontSize: postFontSize + 'em' }">
   <blog-post
      v-for="post in posts"
      v-bind:key="post.id"
      v-bind:post="post"
    ></blog-post>
  </div>
</div>

Затем мы можем добавить кнопку, чтобы увеличить текст перед содержанием каждого сообщения:

Vue.component('blog-post', {
  props: ['post'],
  template: `
    <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <button>
        Enlarge text
      </button>
      <div v-html="post.content"></div>
    </div>
})

Кнопка в настоящее время ничего не делает, если мы хотим получить что-то для родителя, мы используем директиву v-on:

<blog-post
  ...
  v-on:enlarge-text="postFontSize += 0.1"
></blog-post>

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

<button v-on:click="$emit('enlarge-text')">
  Enlarge text
</button>

Создание значения с событием

Иногда полезно выдавать определенное значение вместе с событием: мы можем передать значение как 2-й параметр в $ emit.

<button v-on:click="$emit('enlarge-text', 0.1)">
  Enlarge text
</button>

И затем всякий раз, когда мы слушаем события в родительском объекте, мы можем получить доступ к значению излучаемых событий, используя $ event

<blog-post
  ...  v-on:enlarge-text="postFontSize += $event"
></blog-post>

Использование v-модели на компонентах

Всякий раз, когда мы используем v-модель на компонентах, она делает это:

<custom-input
  v-bind:value="searchText"
  v-on:input="searchText = $event"
></custom-input>

Для этого необходимо, чтобы <input> внутри компонента:

• Привязать к значению опору атрибута значения
• При вводе он генерирует свое собственное событие ввода с новым значением

Случай сценария:

Vue.component('custom-input', {
  props: ['value'],
  template: 
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
})

v-модель теперь должна отлично работать с этим компонентом:

<custom-input v-model="searchText"></custom-input>

Распределение контента через слоты

<slot> позволяет очень просто передавать контент компоненту:

Vue.component('alert-box', {
  template: 
    <div class="demo-alert-box">
      <strong>Error!</strong>
      <slot></slot>
    </div>
})

Динамические Компоненты

Vue <component> предоставляет атрибут is, который позволяет нам динамически переключаться между компонентами:

<component v-bind:is="currentTabComponent"></component>

Предостережения в разборе шаблонов DOM

Элементы HTML, такие как <ol>, <ul>, <table> и <select>, имеют ограничения на элементы, которые могут появляться внутри.

Но специальный атрибут is помогает преодолеть эти ограничения следующим образом:

<table>
  <tr is="blog-post-row"></tr>
</table>