作者：MichaelThiessen译者：前端小智来源：medium喜欢再看一遍，养成习惯分类，也整理了很多我的文档，教程资料。欢迎来到星和完美。面试时可参考考点复习。我希望我们能在一起。Vue提供了两种不同的存储变量：props和data。这些方法一开始可能会令人困惑，因为它们做的事情相似，并且不清楚何时使用props以及何时使用数据。那么props和data有什么区别呢？data是每个组件的私有内存，可以存储任何需要的变量。Props是将数据从父组件传递到子组件的方式。在本文中，我们将学习：什么是props以及为什么这些数据只向下流动，而不是向上流动data选项的目的是什么如何避免props和数据之间的命名冲突如何一起使用props和data什么是Vue中的props,props（或属性）是我们将数据从父组件向下传递到其子组件的方式。当我们使用组件构建应用程序时，我们最终构建了一个称为树的数据结构。类似于家谱，具有：parent-child-ancestor-children数据从根组件（最顶层组件）沿着树向下流动。就像基因如何代代相传一样，父组件将它们的属性传递给它们的子组件。在Vue中，我们在代码的中给组件添加一些props，在这个例子中，我们通过一个名为color-prop的道具，其值为“helloworld”。我们可以从my-component内部访问这个值。然而，当我们从一个组件内部访问props时，我们并不拥有它们，所以我们不能改变它们（就像你不能改变你父母给你的基因一样）。注意：虽然可以更改组件中的属性，但这是一个非常糟糕的主意。您最终还会更改父类正在使用的值，这会导致很多混乱。但是有些情况下我们需要改变变量，那么数据就派上用场了。什么是数据？数据是每个组件的内存，这是存储数据和您希望跟踪的任何其他变量的地方。如果我们正在构建一个计数器应用程序，我们将需要跟踪计数，因此我们将向我们的数据添加一个计数：{{count}}+-
-----------------------------------------exportdefault{name:'Counter',data(){return{//初始化为零开始count:0,}},methods:{increment(){this.count+=1;},减量(){this.count-=1;}}}这里的数据是私有的，只供组件自身使用，其他组件无法访问。注意：理论上，其他组件无法访问这些数据，但实际上可以。但是出于同样的原因，这样做是非常糟糕的。如果需要向组件传递数据，可以使用props向下传递数据（给子组件），或者使用事件向上传递数据（给父组件）。使用Vue，道具和数据都是响应式的。我们不需要过多考虑组件何时更新。Vue会自动为我们做这件事，因为Vue是响应式的。我们不必每次更改数据都调用setState，只需更改数据即可！每当你更新一个响应式属性（道具、计算和数据中的任何值）时，Vue都会知道它何时发生了变化。回到计数器应用，让我们仔细看看这里的方法：{increment(){this.count+=1;},减量(){this.count-=1;我们所要做的就是更新count，Vue会检测到这个变化，并用新值重新渲染我们的应用程序。Vue的响应系统有很多细微差别，如果您想有效地使用Vue，了解这一点很重要。如果您想更深入地了解Vue的反应性系统，这里有更多信息。避免命名冲突Vue做的另一件事是让开发变得更好一点。我们定义了一些props和dataexportdefault{props:['propA','propB'],data(){return{dataA:'hello',dataB:'world',};},};方法，您不必使用this.props.propA或this.data.dataA。Vue让我们完全省略props和dasta，让我们拥有更简洁的代码。我们可以使用this.propA或this.dataA访问它们：//访问我们的数据console.log(this.dataA);所以如果我们不小心在data和props中使用相同的名称，我们就会遇到问题。如果发生这种情况，Vue会给你一个警告，因为它不知道你要访问哪一个。exportdefault{props:['secret'],data(){return{secret:'1234',};},methods:{printSecret(){//我们想要哪个？console.log(this.secret);}}};当我们同时使用props和数据时，Vue的魔力就会发生。一起使用props和数据现在我们已经了解了props和data的不同之处，让我们通过构建一个基本的应用程序来了解为什么我们需要两者。我们将使用名为ContactInfo的组件显示此信息：//ContactInfo电子邮件：{{emailAddress}}Twitter：{{twitterHandle}}Instagram：{{Instagram}}
