如果prop传递的是一个对象或数组那么它是按引用传递的吗？

来源：蜘蛛抓取(WebSpider) 时间：2022-06-02 15:21 标签： form表单提交对象数组

 新手经常问的一个常见问题。可以将字符串、数组、数字和对象作为props传递。但是你能把一个当作一个props来传递吗?

虽然可以将作为props传递，但这种方式不好。相反， 有一个专门为解决这问题而设计的功能，接下来，我们来看看。

获取一个函数或方法并将其作为一个prop传递给子组件相对比较简单。实际上，它与传递任何其他变量方式完全相同：

正如前面所说，在Vue中永远都不要做这样的事情。

为什么？Vue有更好的东西。

如果使用过 ，就会习惯传递函数方式。

在React中，我们可以将一个函数从父组件传递给子组件，以便子组件能够向上与父组件通信。props 和 data 向下流动，函数调用向上流动。

然而，Vue有一种不同的机制来实现子到父通信方式，Vue 使用事件。

这与 DOM 的工作方式相同-与React相比，Vue 的方式与的一致性更高。 元素可以发出事件，并且可以监听这些事件。

因此，尽管在Vue中可以把函数作为prop传递，但它被认为是一种反模式。

事件是我们与 Vue 中的父组件通信的方式。

这里有一个简短的例子来说明事件是如何工作的。

首先，我们将创建子组件，该子组件在创建时会发出一个事件：

在父组件中，我们监听该事件：

事件可以做的事情还有很多，而这仅仅是皮毛。强烈建议查看来了解更多关信息，绝对值得一读。

但是事件并不能完全解决我们所有的问题。

在许多情况下，我们试图解决的问题是访问来自不同作用域的。

父组件有一个作用域，子组件有另一个作用域。

通常，我们希望从父组件访问子组件中的值，或者从子组件访问父组件中的值。Vue阻止我们直接这样做，这是一件好事。

它使我们的组件更加具有封装性，并提高了它们的可重用性。这使我们的更简洁，并从长远来看避免了许多令人头痛的问题。

但是有时候我们可能会试图通过函数来绕过这个问题。

如果希望子组件访问父组件的方法，那么将方法直接作为 prop 传递似乎简单明了。

在父组件中我们会这样做：

在我们的子组件中，使用传入的方法：

这并不是完全错误的，但是在这种情况下使用事件会更好。

然后，当需要时，子组件不会调用该函数，而只是发出一个事件。然后父组件将接收该事件，调用该函数，拼装将更新传递给子组件的 prop。

这是达到同样效果的更好的方法。

在其他情况下，我们可能想要从子元素中获取一个值到父元素中，我们为此使用了函数。

例如，你可能正在这样做。父函数接受子函数的值并对其进行处理：

在子组件中调用传入的方法并将子组件的值作为方法的参数传入：

这也不是完全错误的，这样做是可行的。

只是这不是在Vue中的最佳方式。相反，事件更适合解决这个问题。我们可以使用事件来实现完全相同的事情

在子组件中，我们发出事件:

事件在Vue中非常有用，但它们也不能100%地解决我们的问题。有时，我们需要以不同的方式从父级访问子级的作用域。

为此，我们使用作用域插槽！

作用域插槽是一个更高级的主题，但是它们也非常有用。事实上，我认为它们是Vue提供的最强大的功能之一。

它们弱化了子作用域和父作用域之间的界限。但是它以一种非常干净的方式完成，使得我们的组件像以前一样可组合。

比如子组件中有下面的props，其中的item 是个多层嵌套的对象。

a , b, c 三个属性值，在子组件中功能不一样。如果各自的值改变，要$emit 到父组件，如何把变更后的值传递到父组件呢？
父组件要写几个不同的接收函数区别对待吗？
怎么传值比较简洁高效？

你不需要传递，父组件会同步拿到最新的值，因为你的 props 是引用类型的，最多你只要 $emit 一个事件，告诉父组件变化了，就 okay 了

在写项目时遇到一个问题，父组件传到子组件的prop，在子组件监听不到变化，

遂查看vue文档，得知watch有一种深度监听的方法。

阅读vue文档如下代码。=》

// 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深 // 该回调将会在侦听开始之后被立即调用 // 你可以传入回调数组，它们会被逐一调用

这时就可以监听到对象内部的属性变化了。

疑惑，项目中单层的对象，没有嵌套的对象，居然也监听不到变化。

我要回帖

更多关于 form表单提交对象数组 的文章

 

随机推荐