检查Vue组件是否继承另一个组件

Question

我有两个Vue组件，其中一个继承另一个：

var CompA = { ... }

var CompB = {
  extends: CompA,
  ...
}

我想要通过程序验证CompB是否扩展自CompA，例如：

import CompA from './compA';
import CompB from './compB';

if (CompB instanceof CompA) {
  ...
}

这段代码引发了以下错误：

[Vue warn]: Error in render: "TypeError: Right-hand side of 'instanceof' is not callable"

如何正确地做到这一点？

谢谢！

- Myupe

Answer 1

Vue 组件 CompA 和 CompB 只是普通的 JavaScript 对象，这里没有任何子类或原型链，所以 instanceof 不起作用（更不用说 CompA 不是 Vue 实例，因此它根本行不通）。

你需要编写自己的函数来确定一个组件是否扩展了另一个组件：

function extendsComponent(Comp, Super) {
  while (Comp) {
    if (Comp === Super) {
      return true;
    }
    
    Comp = Comp.extends;
  }
  
  return false;
}

const A = {};
const B = { extends: A };
const C = { extends: B };

if (extendsComponent(C, A)) {
  console.log('C extends A (directly or indirectly)');
} else {
  console.log('C does not extend A');
}

如果您使用Vue.extend来创建组件，则可以像在JavaScript中一样使用原型链来检查继承关系：

const A = Vue.extend({});
const B = A.extend({});
const C = B.extend({});
const Z = Vue.extend({});

console.log(C.prototype instanceof A);  // true
console.log(C.prototype instanceof Z);  // false

<script src="https://rawgit.com/vuejs/vue/dev/dist/vue.js"></script>

- Decade Moon

---

谢谢 - 我想到了 'Vue.extend' 和 'extends' 属性是等价的。 - Myupe