如何在嵌套的可重用组件中处理vuex状态?

时间:2018-06-17 16:05:05

标签: vue.js vuex

我有一个复杂的搜索页面,用户可以使用数百种不同的过滤器指定搜索。我无法想出一种简化使用Vuex的所有内容的方法。

例如,一个部分允许指定多个与AND / OR操作相关的最小 - 最大范围项目。

伪层次结构如下

<parent>
    <multiple-min-max>  
        <number-input :value="greaterEqualValue"> <number-input :value="lessEqualValue"> 
        <select :op="selectedOp"></select>
        <button @click="addNew">
        <button @click="removeCurrent"
    </multiple-min-max>
    ...
    ...
    <multiple-min-max /> another usage for a different thing
</parent>

该组件将在很多地方用于不同的事情。 我不知道如何在最顶层组件和最底层之间传递值,并将值返回到正确的存储区中。 有一种明显的单向绑定方式作为道具并将结果发送回链条,但对于上面相对简单的示例,我需要从<number-input>发出,然后收集<multiple-min-max>中的所有内容并再次向父母发出。 这似乎是样板的很多,特别是当你有一个 lot 的属性来跟踪时。

0 个答案:

没有答案