自定义搜索和过滤功能 VueJS

Question

我希望我能得到一些关于我正在做的事情的反馈。我正在构建一个本质上是一堆数据表的应用程序。我的部分要求是不要使用任何额外的框架 (vuetify) 或任何类型的商店 (vuex)。

目前，我的应用构造如下：

• 创建应用时调用 API
• 该数据被传递到一个组件中，我想在其中进行所有搜索/过滤
• 从那里开始专门为分页构建下一个组件
• 然后是构建数据表的组件。

我的问题是，既然我有这种自上而下的方法，我如何将搜索和过滤功能构建到我不必将任何东西传递回父组件的地方？

我正在使用作用域插槽将数据传递/注入到子组件中。我的第一个想法是我将有一个计算属性，该属性在控制组件中返回一个数组，然后将其传递给分页组件，这是可行的，但是如果我希望能够过滤结果，我该如何使用相同的数组并且还搜索过滤和未过滤的项目？本质上是为了能够模拟一些 Vuetify 表的功能。

Answer 1

我假设您不想在 3 个组件层之间传递 data/prop-drill？

您可以使用提供/注入。 您可以为子组件（2 和 3 层深）提供“setArrayData”方法，还可以提供“arrayData”数据属性。

您还可以使用事件总线（请参阅 vue 文档）。在 Vue 2 中内置了事件总线，而在 Vue 3 中则没有。