vue.js – 检查Vue组件是否扩展另一个组件

2023年5月10日 239次阅读

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

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

谢谢！

最佳答案 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>
点赞