如何将函数作为 props 传递给组件

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

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

React vs Vue

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

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

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

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

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

使用事件

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

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

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


 

问父组件的作用域里数据

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

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

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

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

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

「从父类获取值」

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

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

 

（编辑：阜阳站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!