하위 구성 요소가 어떤 구성 요소에서 호출되는지 어떻게 알 수 있습니까?

하위 구성 요소가 어떤 구성 요소에서 호출되는지 어떻게 알 수 있습니까?

중앙 집중식 상태 관리를 위해 vuex를 사용하고 있다

가능한 한 쉽게 제 문제를 설명하겠습니다.

컴포넌트 A와 컴포넌트 B가 2개 있습니다.

컴포넌트 B

<template>
    <p>{{ value }}</p>
</template>

<script>
    export default{
        data(){
            return{
                value: ''
            };
        },
        created(){
            if(called from component 1){
                this.value = 'called from component 1';
            }else if(called from component 2){
                this.value = 'called from component 2';
            }else if(called from component 3){
                this.value = 'called from component 3';
            }else{
                this.value = 'called from default component';
            }
        }
    }
</script>

컴포넌트 B는 컴포넌트 A의 내부에 다음과 같이 존재합니다.

<template>

    <componentB></componentB>

</template>

<script>
    // import for componentB.
    export default{
        components:{
            'componentB': componentB
        }
    }
</script>

이 컴포넌트 전체를 조합한 컴포넌트, 즉 컴포넌트 A 내의 컴포넌트 B는 재사용이 가능합니다.

이 재사용 가능한 컴포넌트는 다음과 같이 다양한 컴포넌트에 사용합니다.

컴포넌트 1

  <template>

    <componentA></componentA>

</template>

컴포넌트 2

  <template>

    <componentA></componentA>

</template>

컴포넌트 3

  <template>

    <componentA></componentA>

</template> 

그래서 제 문제는 어떤 컴포넌트가 어떤 컴포넌트인지 어떻게 알 수 있느냐는 것입니다.created()적절한 기능을 실행할 수 있도록 컴포넌트 B의 라이프 사이클 훅이 호출되었습니다.

• 나는 소품을 사용할 수 있지만 매번 소품을 2단계 깊이 통과시켜야 한다.

• 아니면 더 나은 방법이 있을까요?

다음과 같이 부모 컴포넌트를 찾을 수 있습니다.this.$parent.

2레벨 깊이의 부모를 찾으려면 더 깊은 부모를 요청하십시오.this.$parent.$parent(루트 인스턴스에는 부모가 없습니다).

질문 예:

Vue.component('component-b', {
  template: `<div>I'm component-b</div>`,
  mounted() {
    // log parent tag 2 levels up:
  	console.log('called by: ', this.$parent.$parent.$vnode.tag)
  }
});

// calls B
Vue.component('component-a', {
  template: `<div>I'm component-a
  	<component-b></component-b>
  	</div>`
});

// this is the top component, calls A
Vue.component('component-top', {
  template: `<div><component-a></component-a></div>`,
});

new Vue({
  el: '#app'
})

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <component-top></component-top>
</div>

언급URL : https://stackoverflow.com/questions/43695643/how-to-know-from-which-component-is-the-child-component-called-from