click 获取数据data-*_Vue 中的 Props 与 Data 细微差别，你知道吗？

Vue提供了两种不同的存储变量：props和data。

这些方法一开始可能会让人感到困惑，因为它们做的事情很相似，而且也不清楚什何时使用props，何时使用data。

那么props和data有什么区别呢？

data是每个组件的私有内存，可以在其中存储需要的任何变量。props是将数据从父组件传递到子组件的方式。

在本文中，我们将学习到：

• 什么是props，为什么这些数据只向下流动，而不是向上

• data 选项的用途

• 响应式是什么

• 如何避免 props 和 data 之间的命名冲突

• 如何将 props 和 data 结合使用

什么是 props

在Vue中，props(或properties)是我们将数据从父组件向下传递到其子组件的方式。

当我们使用组件构建应用程序时，最终会构建一个称为树的数据结构。类似于家谱，具有：

• 父母

• 孩子

• 祖先

• 子孙

数据从根组件(位于最顶端的组件)沿着树向下流动。就像基因是如何代代相传的一样，父组件也会将自己的props传给了他们的孩子。

在Vue中，我们在代码的中向组件添加了一些props

<template>
  <my-component cool-prop="hello world">my-component>
template>

在这个例子中，我们传递一个名为color-prop prop,其值为“hello world”。我们能够从my-component内部访问这个值。

然而，当我们从组件内部访问props时，我们并不拥有它们，所以我们不能更改它们(就像你不能改变你父母给你的基因一样)。

注意:虽然可以更改组件中的属性，但这是一个非常糟糕的主意。最终还会更改父类正在使用的值，这可能会导致很多混淆。

但是有些情况我们需要改变变量，所以 data 就派上用场了。