Question

假设到处都有一个全局组件BIcon.vue。
还有一个叫做BIconFake.vue的组件，但不是全局的，它是常规的。

我们可以这样BIcon.vue覆盖BIconFake.vue：

<template>
  <div>
   <b-icon icon="plus"><!-- <- Here is it BIconFake component! -->
  </div>
</template>

<script>
import BIcon from '~/components/BIconFake'

export default {
  components: {
    BIcon // <- BIconFake component inside!
  }
}
</script>

通过这种方式，Vue.js将显示BIconFake组件，而不是常规的BIcon组件。
我尝试传递道具，事件或属性，但效果与预期的一样。
Vue.js很棒...而且很大。确实，我不了解所有相关信息，并且我不想在进行此覆盖时看到副作用或意外行为。

那么，我想知道这样做是否安全？它会在Vue.js实例中造成混乱吗？那记忆力呢？

我们可以使用纯vue.js覆盖组件。另外，我为Buefy制作了此示例，但是我们可以使用Quasar，Vuetify ...

这样的任何UI框架来做到这一点。

从全局角度考虑，重写UI框架的组件是否很好？安全性，可伸缩性和可维护性如何？

实际上，我搜索了一种方法来为我的Nuxt.js应用程序构建插件或插件系统，例如wordpress插件。
通过覆盖vue组件开始构建我的应用是否是一种好的架构？是否可以使用npm或webpack为vue构建应用程序附加组件？

Answer 1

如果要包装这样的现有组件，则应牢记Liskov substitution principle。 <b-icon-fake>可以代替<b-icon>使用，前提是：

接受相同的道具
发出相同的事件
公开相同的公共方法（如果与ref一起使用）
以相同的方式表现

这些要点中的大多数可能不适用于简单的<b-icon>组件。

还请记住，包装组件的模板现在在其周围包括一个额外的<div>。这可能会干扰样式和诸如此类的事情。

您可以改为使用functional component来消除额外的内存开销，但是您将需要手动编写render函数以保留包装组件的行为。但老实说，除非您确定这是个问题（在对应用程序进行性能分析之后），否则我不会为内存使用担心太多。

就执行此操作是否“好”而言，我不能说。有优缺点。在我看来，只要您是包装器组件的唯一使用者，包装器组件就可以，并且这样做不会影响代码外包装组件的任何现有用法。

覆盖全局Vue组件是否安全？

1 个答案: