在同一页面上渲染同一组件（使用同步数据）两次

Question

我已经阅读了很多文档，但我无法使用以下用例：

我有一个组件 'product-filter'。该组件包含子组件 'product-filter-option'，它呈现一个单独的过滤器选项（带标签的复选框）

产品过滤器实例的 json 数据如下所示：

"name": "category",
  "title": "Category",
  "options": [
    {
      "value": "value",
      "label": "Label 1",
      "active": true,
      "amount": 8
    },
    {
      "value": "value2",
      "label": "Label 2",
      "amount": 15
    },
    etc.
  ]

我的页面上有多个 product-filter 实例（以及很多 product-filter-option 实例）。到目前为止，一切都很好。现在我想在我的页面上多次呈现我的一个过滤器（例如给定的类别过滤器）（类似于当前的 'highlighted' 过滤器，可以在用户交互期间更改）。

所以我尝试使用以下模板代码解决此问题：

<filter-component v-if="activefilter"
                                  :name="activefilter.name"
                                  :type="activefilter.type"
                                  :title="activefilter.title"
                                  :tooltip="activefilter.tooltip"
                                  :configuration="activefilter.configuration"
                                  :options="activefilter.options">
        </filter-component>

所以这个过滤器现在在我的页面上出现了 2 次（仅当设置了 vue 应用程序中的 activefilter 属性时）。但是正如您在更改此 'cloned' 过滤器中的选项时可能猜到的那样，原始过滤器不会更改，因为数据未在这些 'clones' 之间同步。我怎样才能用 Vue 解决这个问题？

感谢您的帮助！

Answer 1

@roy-j，感谢您对同步的评论。我已经通过设置尝试过：

<filter-component v-if="activefilter"
                                      :name="activefilter.name"
                                      :type="activefilter.type"
                                      :title="activefilter.title"
                                      :tooltip="activefilter.tooltip"
                                      :configuration="activefilter.configuration"
                                      :options.sync="activefilter.options">
            </filter-component>

这没有用。但是你让我想到了，选项同步不是问题，'checked' 状态的同步才是问题。它通过将 :checked="option.active" 更改为 :checked.sync="option.acitve" 到子组件来工作：'filter-option-component'!

谢谢！！

在同一页面上渲染同一组件（使用同步数据）两次

Rendering same component (with synced data) twice on same page

vue.js

vue-component