传递道具（Vue / React）的正确方法是什么？分别传递对象或每个道具？答案

【问题标题】：What is the correct way to pass props (Vue/React)? Pass object or each prop separately?传递道具（Vue / React）的正确方法是什么？分别传递对象或每个道具？
【发布时间】：2020-08-24 08:32:27
【问题描述】：

我有以下情况，描述如下。哪个更正确？

在每个单独属性的变体中 - 我们似乎赢了，因为我们切断了从子组件更改道具的随机可能性，您可以安全地验证所有内容。

在第二种情况下，一切似乎都更整齐，但你需要为它编写额外的验证，并且有可能不小心从子组件中修改它。

// 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'
    }"
  />

【问题讨论】：

这能回答你的问题吗？ Vue props: Should I pass the object or its properties? Does it make much difference?

标签： reactjs vue.js

【解决方案1】：

为了尽量减少重新渲染，最好单独发送道具，这取决于其中一些道具是否会更频繁地更新。

如果你想分别给它们传递 props 但又不想单独写 props，你可以使用扩展符号：

<SolocatorHeader {..title} {...desc} />

【讨论】：