Vue 구성 요소가 다른 구성 요소를 확장하는지 확인합니다.

Vue 구성 요소가 다른 구성 요소를 확장하는지 확인합니다.

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(말할 것도 없이) 작동하지 않는다CompAVue 인스턴스가 아니기 때문에 동작하지 않습니다).

하나의 컴포넌트가 다른 컴포넌트를 확장하는지 여부를 판단하려면 자체 함수를 작성해야 합니다.

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>

언급URL : https://stackoverflow.com/questions/47854644/check-if-vue-component-extends-another