Vue提供了两种不同的存储变量：props和data。这些方法一开始可能会令人困惑，因为它们做的事情相似，并且不清楚何时使用props以及何时使用数据。那么props和data有什么区别呢？数据是每个组件的私有内存，你可以在其中存储任何你需要的变量。Props是将数据从父组件传递到子组件的方式。在这篇文章中，我们将学习：什么是props以及为什么这些数据只向下流动，而不是向上流动数据选项的目的是什么什么是响应式如何避免props和数据之间的命名冲突如何将props和数据一起使用什么是Vue中的props，道具（或属性）是我们将数据从父组件向下传递到其子组件的方式。当我们使用组件构建应用程序时，我们最终构建了一个称为树的数据结构。类似于家谱，具有：ParentsChildrenAncestorsDescendants数据从根组件（顶部的组件）向下流到树中。就像基因如何代代相传一样，父组件将它们的属性传递给它们的子组件。在Vue中，我们在代码中为组件添加一些props。在这个例子中，我们传递了一个名为color-prop的属性，其值为“helloworld”。我们可以从my-component内部访问这个值。然而，当我们从一个组件内部访问props时，我们并不拥有它们，所以我们不能改变它们（就像你不能改变你父母给你的基因一样）。注意：虽然可以更改组件中的属性，但这是一个非常糟糕的主意。您最终还会更改父类正在使用的值，这会导致很多混乱。但是有些情况下我们需要改变变量，那么数据就派上用场了。什么是数据？数据是每个组件的内存，这是存储数据和您希望跟踪的任何其他变量的地方。如果我们正在构建一个计数器应用程序，我们将需要跟踪计数，因此我们将向我们的数据添加一个计数：此处的数据是私有的，仅供组件本身使用，其他组件无法访问它。注意：理论上，其他组件无法访问这些数据，但实际上可以。但是出于同样的原因，这样做是非常糟糕的。如果需要向组件传递数据，可以使用props向下传递数据（给子组件），或者使用事件向上传递数据（给父组件）。使用Vue，道具和数据都是响应式的。我们不需要过多考虑组件何时更新。Vue会自动为我们做这件事，因为Vue是响应式的。我们不必每次更改数据都调用setState，只需更改数据即可！只要你想更新响应式属性（道具、计算和数据中的任何值），Vue就会知道它何时发生变化。回到计数器应用程序，让我们仔细看看那里的方法。我们所要做的就是更新计数，Vue将检测到此更改，并使用新值重新渲染我们的应用程序。Vue的响应式系统有很多细微差别，如果你想有效地使用Vue，了解它是非常重要的。如果您想更深入地了解Vue的反应性系统，这里有更多信息。避免命名冲突Vue做的另一件事是让开发变得更好一点。我们在组件上定义了一些道具和数据，如果我们想在方法内部访问它们，我们不必使用this.props.propA或this.data.dataA。Vue让我们完全省略props和dasta，让我们拥有更简洁的代码。我们可以使用this.propA或this.dataA访问它们：所以如果我们不小心在data和props中使用相同的名称，我们就会遇到问题。如果发生这种情况，Vue会给你一个警告，因为它不知道你要访问哪一个。当我们同时使用props和数据时，Vue的魔力就会发生。一起使用props和数据现在我们已经了解了props和data的不同之处，让我们通过构建一个基本的应用程序来了解为什么我们需要两者。我们将使用名为ContactInfo的组件显示此信息ContactInfo组件接受道具：emailAddress、twitterHandle和instagram，并将其显示在页面上。我们的个人资料页面组件ProfilePage如下所示：我们的ProfilePage组件当前显示用户的个人资料图片及其名称，它还有用户数据对象。我们如何从父组件(ProfilePage)获取数据到子组件(ContactInfo)我们必须使用props传递数据。首先，我们需要将ContactInfo组件导入到ProfilePage组件中。其次，我们必须添加组件：现在，ContactInfo所需的所有用户数据都将沿着组件树向下流动，并从ProfilePage进入ContactInfo。我们将数据保存在ProfilePage而不是ContactInfo中的原因是ProfilePage页面的其他部分需要访问用户对象。由于数据只向下流动，这意味着我们必须将数据放在组件树中足够高的位置，以便它可以向下流动到所有需要去的地方。
