Создание props Vue с помощью массива ключей

Вводные данные

Давайте начнем знакомиться с props на практике. Как можно работать с этими свойствами, как можно передавать их в дочерние компоненты. 

Начнем со следующего примера. У нас есть родительский компонент Test:

<template>

<div></div>

</template>

<script>

export default {

  name: "TestComponent.vue",

components: {},

data() {

    return {

      test: 1

}

  },

  created() {},

  methods: {},

  computed: {}

}

</script>

И есть дочерний компонент ChildComponent

<template>

    <div>

    </div>

</template>

<script>

export default {

  props: {},

  data() {}

}

</script>

В этот дочерний компонент мы должны с помощью props передать какие-то данные.

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

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

Задание props с помощью массива ключей Vue 

Если мы хотим принимать в дочернем компоненте некоторые props, мы можем указать их как массив ключей, где каждый ключ будет отдельным prop.

export default {

  props: ['label','count'],

  data() {}

}

В шаблоне prop можно вывести следующим образом:

<template>

    <div>

<p>{{ label }} - {{ count }}</p>

    </div>

</template>

Т.е. мы создали 2 свойства для нашего компонента, 2 его характеристики. Т.е. у компонента теперь есть label (метка) и count (число).

Использование props в родительском компоненте

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

Для начала, нам нужно импортировать этот дочерний компонент в родительский:

import ChildComponent from "@/components/ChildComponent.vue";

components: {

    ChildComponent

  }

После этого мы можем использовать его в template.

props для компонента задаются как атрибуты html элемента. Указываем название prop и через знак равно, его значение.

<ChildComponent

 label="Текстовое значение"

 count="3"

></ChildComponent>

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

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

<ChildComponent

 label="Текстовое значение"

 :count="test"

></ChildComponent>

В этом случая свойство count будет брать свое значение из уровня данных (data) и ключа test.

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

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