自定义搜索和过滤功能 VueJS
Custom Search and Filter functionality VueJS
我希望我能得到一些关于我正在做的事情的反馈。我正在构建一个本质上是一堆数据表的应用程序。我的部分要求是不使用任何额外的框架 (vuetify) 或任何类型的商店 (vuex)。
目前，我的应用程序构造如下：
- API 创建应用时调用
- 该数据已传递到一个组件中，我想在其中完成所有 searching/filtering
- 下一个组件是专门为分页构建的
- 然后是构建数据表的组件。
我的问题是，既然我采用了这种自上而下的方法，我该如何构建搜索和过滤功能，而不必将任何内容传递回父组件？
我正在使用作用域插槽将数据 pass/inject 放入子组件中。我的第一个想法是我会在控制组件中有一个计算 属性 的 returns 数组，然后将其传递给分页组件，这有效，但是如果我希望能够过滤结果并搜索已过滤和 none 已过滤的项目？本质上是为了能够模拟某些 Vuetify 表的功能。
我假设您不想在 3 个组件层之间传递 data/prop-drill？
您可以使用 provide/inject。
您可以为子组件（2 层和 3 层深）提供“setArrayData”方法，还可以提供“arrayData”数据 属性.
您也可以使用事件总线（请参阅 vue 文档）。在 Vue 2 中，事件总线是内置的，在 Vue 3 中不是。
我希望我能得到一些关于我正在做的事情的反馈。我正在构建一个本质上是一堆数据表的应用程序。我的部分要求是不使用任何额外的框架 (vuetify) 或任何类型的商店 (vuex)。
目前，我的应用程序构造如下：
- API 创建应用时调用
- 该数据已传递到一个组件中，我想在其中完成所有 searching/filtering
- 下一个组件是专门为分页构建的
- 然后是构建数据表的组件。
我的问题是，既然我采用了这种自上而下的方法，我该如何构建搜索和过滤功能，而不必将任何内容传递回父组件？
我正在使用作用域插槽将数据 pass/inject 放入子组件中。我的第一个想法是我会在控制组件中有一个计算 属性 的 returns 数组，然后将其传递给分页组件，这有效，但是如果我希望能够过滤结果并搜索已过滤和 none 已过滤的项目？本质上是为了能够模拟某些 Vuetify 表的功能。
我假设您不想在 3 个组件层之间传递 data/prop-drill？
您可以使用 provide/inject。 您可以为子组件（2 层和 3 层深）提供“setArrayData”方法，还可以提供“arrayData”数据 属性.
您也可以使用事件总线（请参阅 vue 文档）。在 Vue 2 中，事件总线是内置的，在 Vue 3 中不是。