Передача данных в компонент, директива props в Vue

Из родительского компонента можно передавать данные в дочерний компонент. Для этого в теге компонента следует написать атрибуты с данными. Давайте передадим имя и фамилию юзера:

App.vue<template>
    <User name="john" surn="smit" />
</template>

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

components/User.vue<script>
    export default {
        props: ['name', 'surn'],
        data() {
            return {

            }
        }
    }
</script>

Теперь переданные данные можно вывести в представлении дочернего компонента:

components/User.vue<template>
    {{ name }}
    {{ surn }}
</template>

Указание типа пропсов

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

props: {
    title: String,
    likes: Number,
    isPublished: Boolean,
    commentIds: Array,
    author: Object,
    callback: Function,
    // или любой другой конструктор
    contactsPromise: Promise
}

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

Давайте укажем тип пропсов для нашего компонента с юзером:

components/User.vueexport default {
    props: {
        name: String,
        surn: String
    },
    data() {
        return {}
    }
}

Передача данных любого типа

В дочерние компоненты можно передавать не только строки и числа, но и данные любого типа. Для этого нужно байндить атрибут через директиву v-bind или ее сокращенную форму.

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

App.vue<template>
    <User :arg="[1, 2, 3]" />
</template>

Передадим объект:

App.vue<template>
    <User :arg="{a: 1, b: 2, c: 3}" />
</template>

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

App.vue<template>
    <User :arg="true" />
</template>

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

Можно также передавать в дочерние компоненты свойства объекта data. Давайте посмотрим на примере. Пусть у нас есть следующие свойства:

App.vuedata()
{
    return {
        name: 'john',
        surn: 'smit',
    }
}

Передадим их значения в компонент:

App.vue<template>
    <User :name="name" :surn="surn" />
</template>

Передача данных в компонент в цикле

Компоненты можно создавать в цикле, передавая им соответствующие данные. Давайте посмотрим, как это делается. Пусть в родительском компоненте дан следующий массив объектов:

App.vuedata()
{
    return {
        users: [
            {
                id: 1,
                name: 'name1',
                surn: 'surn1'
            },
            {
                id: 2,
                name: 'name2',
                surn: 'surn2'
            },
            {
                id: 3,
                name: 'name3',
                surn: 'surn3'
            },
        ],
    }
}

Давайте переберем этот массив объектов циклом и в цикле будем создавать компоненты с юзерами. Укажем значения атрибута key для правильной работы цикла:

App.vue<template>
    <User v-for="user in users" :key="user.id" />
</template>

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

App.vue<template>
    <User
        v-for="user in users"
        :name="user.name"
        :surn="user.surn"
        :key="user.id"
    />
</template>