基于Vue通用组件定制化的场景解决

场景描述

• 组件1中使用了通用组件2，通用组件2提供了reset按钮，可以清除搜索框中的各个字段，但是组件1的场景中需要保留一个字段值。
• 由于通用组件2已被多个组件使用，不能轻易更改通用组件功能。

技术背景

• Vue2项目
• 父子组件和ref
• 通用组件定制化

方案解决

• 覆盖。通过ref动态重写实例方法。
  • 在组件1中获取通用组件2的ref值，在mounted中根据ref将通用组件2的reset方法动态覆盖，使用当前场景的特殊逻辑方法。
  • 该方法不会修改组件2的源码，且仅在当前组件1的作用域内生效。
• 注意
  • 不能在created钩子中覆盖，此时还未创建完成，获取获取reset方法，需要在mounted。

参考资料

• vue 如何暴露方法