检查 Vue 组件是否扩展了另一个

Question

我有 2 个 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"

这样做的正确方法是什么？

谢谢！

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>