javascript - 在 vuejs 2 中独立时更新组件属性

Question

创建通用组件时，我们通常希望它作为独立组件或作为较大组件的子组件工作。

我正在尝试找到在 Vuejs2 中执行此操作的最佳方法。看起来该方法是使用属性和自定义事件的组合。

我使用检查列表创建了一个示例来说明该问题:https://codepen.io/duprasa/pen/LmLRjE

我还创建了此图来进一步说明问题

我读过vue documentation在 Prop 上，他们没有提到在这种情况下该怎么做，也没有警告我当前使用的策略。

我认为这是一种相当常见的模式，了解处理它的最佳策略是什么会很有用。

谢谢!

Answer 1

你的组件checkList有太多的职责。如果您希望组件可重用，它应该只承担一个职责:显示项目列表，并在选择项目时发出事件。它不应该自行更新该项目。

使用check-list (app) 的组件可以处理该事件并更新项目selected 属性。它还提供了包含要显示的项目的检查列表。

您可以引入一个新组件，例如standalone-check-list，它将为 list 提供默认的项目集并处理事件以相应地更新列表。然后使用standalone-check-list作为独立组件。