Как использовать реквизиты в Vue.js

09 августа 2022 г., Первоначально опубликовано на techvblogs.com・4 мин чтения

Vue.js довольно удивителен своим приложением и структурой компонентов. Он также предлагает некоторые удивительные возможности.

В этой статье мы рассмотрим, как мы можем использовать и реализовывать реквизиты в Vue.js.

Что такое реквизиты в Vue.js?

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

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

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

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

Почему вы должны использовать реквизит?

Вы спросите, зачем использовать реквизит? Если у вас есть объект данных (скажем, из списка 10 лучших исполнителей Billboard), который вы хотите отобразить в двух разных компонентах, но очень разными способами, первым делом будет создать эти два отдельных компонента, добавить массив внутрь объекта данных. а затем отображать их в шаблоне.

Определить реквизит внутри компонента

Реквизиты — это то, как компоненты могут принимать данные от компонентов, которые их включают (родительские компоненты).

Когда компонент ожидает одно или несколько свойств, он должен определить их в своем свойстве props:

Vue.component('user-card', {
  props: ['name'],
  template: '<p>Hi {{ name }}</p>'
})

или, в компоненте одного файла Vue:

<template>
  <p>Hi {{ name }}</p>
</template>
<script>
export default {
  props: ['name']
}
</script>

Принять несколько реквизитов

Вы можете иметь несколько реквизитов, добавив их в массив:

Vue.component('user-card', {
  props: ['firstName', 'lastName'],
  template: '<p>Hi {{ firstName }} {{ lastName }}</p>'
})

или, в компоненте одного файла Vue:

<template>
  <p>Hi {{ firstName }} {{ lastName }}</p>
</template>
<script>
export default {
  props: ['firstName', 'lastName']
}
</script>

Типы объектов Vue.js

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

Если тип передаваемых данных не соответствует типу prop, Vue отправляет алерт (в режиме разработки) в консоль с предупреждением. Допустимые типы, которые вы можете использовать:

• Нить
• Число
• логический
• Множество
• Объект
• Дата
• Функция
• Символ

Vue.component('user-card', {
  props: {
    firstName: String,
    lastName: String
  },
  template: '<p>Hi {{ firstName }} {{ lastName }}</p>'
})

или, в компоненте одного файла Vue:

<template>
  <p>Hi {{ firstName }} {{ lastName }}</p>
</template>
<script>
export default {
  props: {
    firstName: String,
    lastName: String
  },
}
</script>

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

props: {
  firstName: [String, Number]
}

Установите реквизит как обязательный

Вы можете потребовать, чтобы реквизит был обязательным:

props: {
  firstName: {
    type: String,
    required: true
  },
  lastName: {
    type: String,
    required: true
  }
}

Установите значение по умолчанию для реквизита

Вы можете указать значение по умолчанию:

props: {
  firstName: {
    type: String,
    required: true,
    default: 'Alex'
  },
  lastName: {
    type: String,
    required: true,
    default: 'Mark'
  }
}

Для объектов:

props: {
  user: {
    type: Object,
    default: {
      firstName: 'Unknown',
      lastName: ''
    }
  }
}

default также может быть функцией, которая возвращает соответствующее значение, а не фактическое значение.

Передача реквизита компоненту

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

<ComponentName color="white" />

если то, что вы передаете, является статическим значением.

Если это свойство данных, вы используете

<template>
  <ComponentName :name="name" />
</template>
<script>
export default {
  data: function() {
    return {
      name: 'Alex'
    }
  },
}
</script>

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

<template>
  <ComponentName :name="name == '' ? 'Alex' : name" />
</template>
<script>
export default {
  data: function() {
    return {
      name: ''
    }
  },
}
</script>

Заключение

В этой статье мы узнали, что делают реквизиты и как они работают в Vue.js.

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

Спасибо за чтение этого блога.