vue关于双向数据绑定的骚操作

组件传值大家都知道 直接上代码

  computed: {
    optionModel: {
      get() {
        return this.selectedWidget.options;
      },
      set(newValue) {
        this.selectedWidget.options = newValue;
      }
    }
  }

我们将optionModel传递给子组件 

子组件可以直接修改props 来实现双向数据绑定

但是正常来时我们是不能修改props的值的 看看解释

在 Vue 中，确实有一种常见的最佳实践是避免直接修改 props，因为 props 是从父组件传递下来的数据，直接修改它们可能会导致数据流难以追踪和维护。然而，在某些情况下，特别是当你需要实现双向绑定时，直接修改 props 是可以接受的。

在你的例子中，你通过计算属性 optionModel 实现了双向绑定。计算属性 optionModel 包含了 get 和 set 方法，这使得 Vue 可以自动处理 optionModel 的读写操作。当你在子组件中修改 optionModel 时，set 方法会被调用，从而更新父组件的 selectedWidget.options。

这种做法虽然技术上可行，但需要注意以下几点：

1. 数据流清晰性：确保这种双向绑定不会导致数据流变得混乱，特别是在大型应用中。
2. 可维护性：如果其他开发者看到你直接修改 props，可能会感到困惑。因此，最好在文档中明确说明这种做法的合理性。
3. 性能考虑：虽然 Vue 的响应式系统会处理大部分性能问题，但过度使用双向绑定可能会导致不必要的性能开销。

总的来说，虽然技术上可以在子组件中修改 props，但最好遵循 Vue 的最佳实践，尽量减少直接修改 props 的行为。