상위 구성 요소의 한 Vue 구성 요소에서 저장된 vanilla 클래스 인스턴스에 액세스하는 방법

상위 구성 요소의 한 Vue 구성 요소에서 저장된 vanilla 클래스 인스턴스에 액세스하는 방법

둘 다 동일한 기본 구성 요소에서 상속되는 두 개의 하위 구성 요소를 가진 상위 구성 요소가 있습니다(이 상위 구성 요소는 Vue Storybook에서 생성되어 사용되고 있습니다).둘다요.SiblingAComponent그리고.SiblingBComponent같은 것을 계승하다BaseComponent및 동일한 상속된 데이터를 인스턴스화합니다.classInstance이것은 다른 라이브러리의 바닐라 JS 클래스 인스턴스입니다.접속을 시도하고 있습니다.classInstance상위 컴포넌트에서 두 번째 형제 컴포넌트로 데이터 전달(이 경우 에서)SiblingAComponent로.SiblingBComponent)를 참조해 주세요.siblingARef그러나 스토리북 컴파일러에서 다음과 같은 오류가 발생합니다.

too much recursion
isArguments@http://localhost:6006/vendors~main.9107ef8d0bc0558399e1.bundle.js:49010:16
keys@http://localhost:6006/vendors~main.9107ef8d0bc0558399e1.bundle.js:49073:28
_traverse@http://localhost:6006/vendors~main.9107ef8d0bc0558399e1.bundle.js:119972:19
_traverse@http://localhost:6006/vendors~main.9107ef8d0bc0558399e1.bundle.js:119974:28

Parent Component 스토리:

storiesOf("ParentComponent Story", module)
    .addDecorator(
        withKnobs({
            escapeHTML: false
        })
    )
    .add("Passing data from A to B", () => ({
        name: 'ParentComponent',
        components: {
            SiblingAComponent,
            SiblingBComponent,
        },
        data() {
            return {
                siblingAData: [....], // array of objects
                siblingAOptions: {
                    axes: {},
                    height: "50px",
                },
                siblingBData: [...], // array of objects
                siblingBOptions: null,
            }
        },
        mounted() {
          const siblingAInstance = this.$refs.siblingARef.classInstance;

          const newOptions = {
            legend: {
                external: {
                    reference: siblingAInstance,
                },
            },
          };
       
         // this line is where I am getting an error
         this.siblingBOptions = legendExternal;
      },
      template: `
      <SiblingAComponent ref="siblingARef" :data="siblingAData" :options="siblingAOptions"/>
      <SiblingBComponent v-if="siblingBData" :data="siblingBData" :options="siblingBOptions"/>
      `,
}));

형제 AC 컴포넌트:

<template>
    <div class="sibling-a-component"></div>
</template>

<script>
import { ComponentA } from '@libraryexample/components';
import BaseComponent from './base-component.vue';

export default {
    name: 'SiblingAComponent',
    extends: BaseComponent,
    mounted() {
        this.classInstance = new ComponentA(this.$el, {
            data: this.data,
            options: this.options,
        });
    },
};
</script>

형제 BC 구성 요소:

<template>
    <div class="sibling-b-component"></div>
</template>

<script>
import { ComponentB } from '@libraryexample/components';
import BaseComponent from './base-component.vue';

export default {
    name: 'SiblingBComponent',
    extends: BaseComponent,
    mounted() {
        this.classInstance = new ComponentB(this.$el, {
            data: this.data,
            options: this.options,
        });
    },
};
</script>

기본 컴포넌트:

<script>
export default {
    name: 'BaseComponent',
    data() {
        return {
            classInstance: null,
        };
    },
    props: {
        data: { type: [Object, Array], required: true },
        options: { type: Object, required: true },
    },
};
</script>

Angular 및 React의 세계에서는 다른 컴포넌트의 Vanilla 클래스 인스턴스에 액세스하기 위한 참조를 사용하는 것은 새로운 것이 아닙니다.Vue는 처음이라 클래스 인스턴스에 액세스하려고 하면 (원시적인 데이터 타입은 정상적으로 동작) 실패하여 이렇게 이상한 오류가 발생하는 이유는 무엇입니까?재귀는 어디에서 발생합니까?

언급URL : https://stackoverflow.com/questions/62635406/how-to-access-vanilla-class-instance-stored-from-one-vue-component-in-a-parent-c