Реквизит

Учебник по основам компонентов является обязательным условием для этого учебника.

Корпус пропеллера (CamelCase vs kebab-case)

Браузеры интерпретируют заглавные символы как строчные, потому что имена атрибутов HTML не чувствительны к регистру. Таким образом, когда мы использовали в шаблонах -DOM, имена реквизитов camelCased должны использовать их эквивалентный случай kebab:

JS

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

HTML

<blog-post post-title="hello!"></blog-post>

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

Типы rop

До сих пор мы видели реквизиты, перечисленные только как массив строк:

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

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

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise // or any other constructor
}

Это документирует ваш компонент, а также предупредит пользователей в консоли javascript браузера, когда они передают неправильный тип.

Передача статического или динамического реквизита

До сих пор мы оба видели, как реквизиты передавали статическое значение, как в этом случае:

<blog-post title="My journey with Vue"></blog-post>

А также видели динамически назначенные реквизиты с v-bind, как в этом случае:

<!-This will dynamically assign the value of a variable -->
<blog-post v-bind:title="post.title"</blog-post>

Проходя номер

<!-- Though `42` is static, using v-bind will tell Vue that -->
<!-that this is a JavaScript expression and not a string. -->
<blog-post v-bind:likes="42"></blog-post>```
<!-Assign a value to the variable dynamically -->
<blog-post v-bind:likes="post.likes"></blog-post>

Передав логическое значение

<!-when we include the prop with no value this will imply `true`. -->
<blog-post is-published></blog-post>
<!-- Though `false` is static, we need to use v-bind to tell Vue that -->
<!-- this is a JavaScript expression and not a string.          -->
<blog-post v-bind:is-published="false"></blog-post>
<!-this will dynamically assign to the value of a variable. -->
<blog-post v-bind:is-published="post.isPublished"></blog-post>

Передача массива

<!-The v-bind directive tells vue that this is an array and not a string-->
<blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post>
<!-Here we assign the variable to a value dynamically. -->
<blog-post v-bind:comment-ids="post.commentIds"></blog-post>

Передача объекта

<!-The v-bind directive tells vue that the static object is a JavaScript expression and not a string -->
```<blog-post
  v-bind:author="{
    name: 'Veronica',
    company: 'Veridian Dynamics'
  }"
></blog-post>```
<!-Dynamic assigning a value to a variable -->
<blog-post v-bind:author="post.author"></blog-post>

Передача свойств объекта

Когда мы хотим передать все свойства объекта как реквизиты, мы можем использовать v-bind без аргумента (v-bind вместо v-bind: prop-name). Например, рассмотрим объект post:

post: {
  id: 1,
  title: 'My Journey with Vue.Js'
}

Со следующим шаблоном:

<blog-post v-bind="post"></blog-post>

Это будет эквивалентно:

<blog-post
  v-bind:id="post.id"
  v-bind:title="post.title"
></blog-post>

Односторонний поток данных

По умолчанию данные передаются только от родительского компонента к дочернему компоненту. Это помогает предотвратить случайную мутацию родительского состояния (это хорошо для вашего приложения)

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

1. Реквизит был использован для передачи начального значения, которое потом дочерний компонент хочет использовать в качестве локального свойства данных. В таком случае наиболее предпочтительно определить локальное свойство данных, которое использует проп в качестве своего начального значения.
2. нам нужно преобразовать опору, которая была передана в качестве необработанной стоимости.

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

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

Vue.component('my-component', {
  props: {
    // A Basic type check (`null` and `undefined` values will pass any of the type validation)
    propA: Number,
    // A Multiple possible types
    propB: [String, Number],
    // A Required string
    propC: {
      type: String,
      required: true
    },
    // A Number with a default value
    propD: {
      type: Number,
      default: 100
    },
    // An Object with a default value
    propE: {
      type: Object,
      // An Object or array defaults must be returned from a factory function
      default: function () {
        return { message: 'hello' }
      }
    },
    // A Custom validator function
    propF: {
      validator: function (value) {
        // to that the value must match one of these strings
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

Тип может быть одним из следующих собственных конструкторов:

• строка
• Число
• логический
• массив
• объект
• Дата
• функция
• Условное обозначение

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

function Person (firstName, lastName) {
  this.firstName = firstName
  this.lastName = lastName
}```
Then you could now use:
```Vue.component('blog-post', {
  props: {
    actor: Person
  }
})

Чтобы подтвердить, что значение реквизита актера было создано с новым Person.

Не-атрибуты

Не-prop-атрибуты - это атрибуты, которые передаются компоненту, но для них не определен соответствующий prop.

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

Например, рассмотрите возможность использования стороннего компонента начальной загрузки начальной загрузки с [lugin, которому требуется входной атрибут data-date-picker.

Мы могли бы добавить этот атрибут к нашему экземпляру компонента:

<bootstrap-date-input data-date-picker="activated"></bootstrap-date-input>

Замена / слияние с существующими атрибутами

Учитывая, что шаблон для начальной загрузки начальной загрузки:

<input type="date" class="form-control">

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

<bootstrap-date-input
  data-date-picker="activated"
  class="date-picker-theme-dark"
></bootstrap-date-input>

Отключение наследования атрибутов

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

Vue.component('my-component', {
  inheritAttrs: false,
  // ...
})

Когда мы объединяем атрибутытека и $ attrs, мы можем вручную решить, к какому элементу мы хотим пересылать атрибуты.