Понятие props во Vue. Что это и зачем это нужно.

Следующее понятие, с которым придется столкнуться при работе с компонентами Vue - это понятие props. 

Давайте подробнее остановимся на этом понятии и разберемся, что же такое props и для чего это нужно. 

Что такое props во Vue?

props - это сокращение от properties (свойства). По сути, это такой особый элемент компонентов Vue, которые позволяет передавать какие-то данные из родительского компонента, к дочернему компоненту. В родительском компоненте есть какой-то уровень data и некоторые значения из этого уровня props позволяют передавать в дочерний компонент. Кроме того, уровень данных свой также остается у дочернего компонента. props - это не уровень данных.

Здесь важно понимать, что обратная связь с помощью props невозможна. Мы не можем передавать данные с помощью props из дочернего элемента к родительскому. Props нужны только для приема свойств в дочернем компоненте.

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

Что собой представляют props?

Props - это специальный блок в компоненте, который содержит в себе набор ключей. 

Например, это может выглядеть вот так:

export default {

  name: "TestComponent.vue",

components: {},

props: {

      title: String,

      likes: Number

},

data() {

    return {

      text: '<h1>Заголовок</h1><p>Абзац</p>'

}

  },

  created() {},

  methods: {},

  computed: {}

}

Т.е. в нашем компоненте появляется блок с одноименным названием props, который содержит возможные ключи, которые может принимать компонент.

Существует более одного способа, как можно создать props в компоненте, но пока важно понимать, что это просто набор ключей.

Благодаря props мы как бы говорим, какой у нас является компонент, какие у него могут быть свойства.

Примеры props

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

Props - это что-то вроде атрибутов html элементов. 

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

Например, мы создали компонент кнопки и с помощью props мы можем указать в родительском компоненте ее размер, ширину, высоту и другое оформление этой кнопки. Используя один и тот же компонент, мы меняем его внешний вид из родительского компонента.

Также props являются подсказками для программистов, посмотрев на них, мы можем примерно представить каким является компонент и что он может делать. Какие входные данные мы можем в него передать и как он может на них отреагировать.

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

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

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