# Передаем данные из parent в child с помощью props в Vue

06:33
poster
В этом видео мы с вами разберем, как передавать данные из parent компоненты в child.
Понравилось? Поделитесь с друзьями!
Понравилось?
Поделитесь с друзьями!
Комментарии
Текст видео

В этом видео мы с вами разберем, как передавать данные из parent компоненты в child.

В данный момент у меня развернут webpack-simple проект и создано две компоненты. Parent компонента App и child User. В компоненте User у нас рендерится имя юзера и описание. И ,конечно, для того, чтобы эту компоненту можно было переиспользовать мы хотим передавать в нее данные из места, где мы ее вызываем.

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

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

User.vue

<script>
export default {
  props: ['name', 'description']
}
</script>

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

App.vue

<my-user name='Alex' description='Our admin' />

Эти props нам доступны в компоненте в виде обычных переменных. Поэтому нам осталось просто отрендерить их в шаблоне.

<h3>{{name}}</h3>
<div>
  {{description}}
</div>

Если мы посмотрим в браузер, то у нас отрендерился наш юзер, но тебе уже с данными, которые мы передали его из parent компоненты.

Давайте сделаем этот пример более реалистичным. Мы можем добавить в App компонент массив юзеров и отрендерить его с помощью User компоненты.

Давайте добавим юзеров.

App.vue

data () {
  return {
    message: 'Hello',
    users: [
      {name: 'Alex', description: 'This is our admin'},
      {name: 'Jack', description: 'This is our manager'},
      {name: 'John', description: 'This is our client'},
    ]
  }
}

Теперь мы можем использовать v-for директиву для того, чтобы отрендерить User компоненту в цикле.

App.vue

<user v-for='user in users'
  :name='user.name'
  :description='user.description'
/>

Обратите внимание, что мы хотим прокинуть name и description как переменную и для этого мы использовали здесь v-bind. В данном случае я использовал алиас для v-bind - двоеточие.

Если мы посмотрим в браузер, то наш компонент User отрендерился 3 раза, каждый раз с разными данными.

А теперь немного о именовании props. У них такие же правила, как и у именования компонент.

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

User.vue

export default {
  props: ['name', 'description', 'isActive']
}

App.vue

users: [
  {name: 'Alex', description: 'This is our admin', isActive: true},
  {name: 'Jack', description: 'This is our manager', isActive: false},
  {name: 'John', description: 'This is our client', isActive: false},
]

В чисто html мы не можем указывать свойства с помощью camelCase. Но это не чистый html, а шаблон Vue. И здесь мы можем прокидывать аттрибуты, как camelCase.

App.vue

<user v-for='user in users'
  :name='user.name'
  :description='user.description'
  :isActive='user.isActive'
/>

Если мы посмотрим в браузер, то все работает. Но точно также, мы можем указать их через тире и Vue автоматически сконвертирует ее в camelCase вариант.

А еще одно. У нас в консоли warning

component lists rendered with v-for should have explicit keys.

Это происходит, потому что Vue использует "in-place patch" стратегию, чтобы обновлять списки. И для Vue легче это делать, если мы укажем уникальный ключ к каждому элементу, когда используем v-for. В нашем случае мы можем использовать name, как уникальный ключ.

App.vue

<user v-for='user in users'
  :key='user.name'
  :name='user.name'
  :description='user.description'
  :is-active='user.isActive'
/>

Теперь warning пропал.

Если у вас возникли какие-то вопросы или комментарии, пишите их прямо под этим видео.

Только зарегистрированные пользователи могут оставлять комментарии.  Войдите, пожалуйста.
Petr Pozhoga
8 месяцев назад
Здравствуйте, прописываю props в (<router-view v-for="item in dataCart" :dataprice='item.itemPrice'></router-view>) так как child компоненты находятся в нем, мне выдает ошибку (<router-view v-for="item in dataCart">: component lists rendered with v-for should have explicit keys), что нет ключа хоть он указан, в чем проблема ? Заранее спасибо.
monsterlessons
8 месяцев назад
Добрый день. Под ключем имеется ввиду :key параметр. У вас он не указан.
Petr Pozhoga
8 месяцев назад
А:dataprice это не ключ ? если нет то как должно быть, я прочитал документацию но не понял ?
monsterlessons
8 месяцев назад
dataprice - это не ключ. Я написал как должно быть выше <some-component :key='item.id'>
Иван Древаль
9 месяцев назад
Спасибо. Будет как шпаргалка.
monsterlessons
9 месяцев назад
На здоровье)