您好,欢迎来到12图资源库!分享精神,快乐你我!我们只是素材的搬运工!!
  • 首 页
  • 当前位置:首页 > 开发 > WEB开发 >
    Vue 中的 Props 与 Data 细微差别,你知道吗?
    时间:2020-03-08 08:08 来源:网络整理 作者:网络 浏览:收藏 挑错 推荐 打印

    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

    在这个例子中,我们传递一个名为color-prop prop,其值为“hello world”。我们可以从my-component外部拜访这个值。

    但是,当我们从组件外部拜访props时,我们并不拥有它们,所以我们不能更改它们(就像你不能改动你父母给你的基因一样)。

    留意:虽然可以更改组件中的属性,但这是一个十分蹩脚的主意。最终还会更改父类正在运用的值,这能够会招致很多混杂。

    但是有些状况我们需求改动变量,所以 data 就派上用场了。

    什么是 data ?

    data是每个组件的内存,这是存储数据和希望跟踪的任何其他变量的中央。

    假设我们正在构建一个计数器运用顺序,我们将需求跟踪计数,因此我们将向我们的data添加一个count:

    此处的data是私有的,仅供组件本身运用,其他组件不能拜访它。

    留意:实际上是其它组件是不能拜访这些数据,但实践是可以的。但是出于异样的缘由,这样做是十分蹩脚的

    假设需求向组件传递数据,可以运用props向下传递数据(传递给子组件),或许运用事情向上传递数据(传递给父组件)。

    props 和 data 都是照应式的

    运用 Vue,我们不需求过多地思索组件什么时分会更新,Vue 会自动帮我们做好,由于 Vue 是照应式的。

    我们不必每次更改 data 都调用setState,只需更改data即可!只需求更新具有照应式的属性(props,computed 及 data 中的任何值),Vue 就会知道它何时发作变化。

    回到计数器运用顺序,我们细心看看这外面的办法

    我们所要做的就是更新count,Vue 会检测到这个变化,然后用新值重新渲染我们的运用顺序

    Vue 的照应系统有很多纤细的差别,假设你想要高效地运用Vue,了解它是十分重要的。假设你想更深化地了解Vue的照应系统,这里有更多要了解的东西。

    避免命名抵触

    Vue所做的另一件事是,使开发任务变得更好一点。

    我们在组件上定义一些 props 和 data

    假设要在办法外部拜访它们,则不必运用this.props.propA或this.data.dataA。Vue 让我们完全省略了 props 和 dasta,只剩下了更整洁的代码。

    我们可以运用this.propA或this.dataA拜访它们:

    因此,假设我们不小心在data和 props中运用相反的称号,则会遇到成绩。

    假设发作这种状况,Vue 会给你一个正告,由于它不知道你想拜访哪个。

    当我们同时运用props和data时,Vue 的神奇之处就产生了。

    props 和 data 一同运用

    既然我们曾经看到了 props 和 data 的不同之处,让我们来看看为什么我们需求两个,经过树立一个基本的运用顺序。

    我们将运用名为ContactInfo的组件显示此信息

    ContactInfo组件接受 props:emailAddress,twitterHandle和instagram,并将其显示在页面上。

    我们的团体材料页面组件ProfilePage如下所示:

    我们的ProfilePage组件目前显示用户的配置文件图片及其称号,它还有用户数据对象。

    我们如何从父组件(ProfilePage)向下获取数据到子组件(ContactInfo)

    我们必须运用 props 传递数据。

    (责任编辑:admin)