在vuejs 2中独立更新组件prop

Question

在创建通用组件时，我们希望它可以像独立组件一样工作，也可以像大型组件一样工作。

我正试图在Vuejs2中找到最好的方法。看起来这种方法似乎是使用 props 和自定义事件的组合。

我使用check-list创建了一个示例来说明问题：https://codepen.io/duprasa/pen/LmLRjE

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

我已经阅读了关于道具的vue documentation，他们没有提到在这种情况下该做什么，并警告我正在使用的策略。

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

谢谢！

Answer 1

您的组件checkList有太多责任。 如果您希望组件可以重复使用，则它应该只有一个责任：显示项目列表，并在选择项目时发出事件。它不应该自己更新项目。

使用check-list（app）的组件可以处理事件并更新项selected属性。它还为check-list提供了要显示的项目。

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