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