Как правильнее передавать пропсы?

Question

[eugenedrvnk]

Как правильнее в такой ситуации прокидывать пропсы?
В варианте с каждым отдельным свойством - мы выигрываем вроде бы в том, что обрезаем случайную возможность изменения пропса из дочернего компонента + можно спокойно провалидировать всё.
Во втором случае - всё вроде бы более аккуратно структурировано, но для него нужно писать дополнительную валидацию и есть вероятность случайно модифицировать из дочернего компонента.

// 1

  <SolocatorHeader 
    titleText="Project Summary"
    titleColor="#FFDBCD"
    titleImg="/test.png"
    descText="Some text"
    descColor="#FFFFFF"
  />

// 2

  <SolocatorHeader
    :title="{
      text: 'Project Summary',
      color: 'FFDBCD',
      img: '/test.png'
    }"
    :desc="{
      text: 'Some text',
      color: '#FFFFFF'
    }"
  />

Answer 1

[Дима Паутов]

Зависит от того, что делает компонент.
Если вы создали свой компонент, блок с товаром или подобные, то лучше 1й вариант.
Т.к. вы скорей всего большую часть опций будете выводить внутри шаблона, а проще это выглядит, когда свойство состоит из 1 элемента цепочки. Да и отладка будет куда проще с таким подходом.

data.props.title vs title

2й вариант лучше подходит, когда компонент - это обёртка для какой-то библиотеки, слайдера например и т.п.. Проще говоря, так удобнее передавать данные, когда вы с ними в самом компоненте не работаете на прямую, а лишь передаёте для инициализации библиотеке. Ведь у неё может быть 100500 опций. Их проще передавать именно таким способом.

Вывод, создавайте отдельные пропсы для тех свойств, с которыми будете напрямую работать в компоненте, выводить в шаблоне, в вычисляемых свойствах или же просто внутри методов.
А те, с которыми не будете, исходя из пункта 2, передавайте цельным объектом. Иначе замучаетесь каждую опцию описывать в виде пропса.