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 isn＆＃39; ta Vue实例，所以它无论如何都不会工作。）

您必须编写自己的函数来确定一个组件是否扩展另一个组件：

＆＃13;

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');
}

＆＃13;

如果您使用Vue.extend创建组件，那么您可以使用原型链来检查继承，就像通常在JavaScript中一样：

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: