在 vuejs 2 中独立时更新组件道具

Question

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

我正在尝试在 Vuejs2 中找到最好的方法。似乎该方法是使用 props 和 自定义事件 的组合。

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

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

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

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

谢谢！

Answer 1

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

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

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