在 vue 项目使用继承

61 阅读1分钟

当你所开发的项目中如果封装的有公共组件,公共的组件的内部逻辑相比本身的业务逻辑产生冲突,需要修改组件内部的方法,这个公共组件所在别的代码库,通过cdn链接引入在本地代码库,本地代码库是无法修改的,这个时候就可以通过 js 的继承机制,我们克隆出来一个独立的个体,和之前的本质没有关联,后期本体组件进行修改,我们继承过来的组件也能够同步,并且无论我们怎么修改也不会影响本体组件里面的逻辑。

vue 项目举例,但继承并不是 vue 上的方法,而是 js 本就有的机制。

<script>
// 因为封装的组件挂在了vue实例上,我们就可以通过此方法拿到这个组件
const PopupCell = Vue.options['components'].PopupCell;
export default { 
  // 继承这个组件
  extends: PopupCell,
}
</script>

在之后我们无论是在继承来的组件里面写任何 模版 、样式 、脚本、都会遵循继承的原则,如果已有则会覆盖原本的,用我们自己的,如果没有就还用组件本体的。