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
就派上用场了。