Question

我正在使用vuex进行中心化管理

我会尝试尽可能容易理解我的问题。

我有两个组件 componentA 和 componentB 。

以componentB

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

componentB 位于 componentA 内，如下所示：

<template>

    <componentB></componentB>

</template>

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

整个组合成分，即 componentA 在 componentA 中被视为单个组件，可以重复使用。

所以我在各种其他组件中使用这个组合的可重用组件，如下所示：

组件1

  <template>

    <componentA></componentA>

</template>

组件2

  <template>

    <componentA></componentA>

</template>

组件3

  <template>

    <componentA></componentA>

</template>

所以我的问题是如何知道哪个组件被调用 componentB 的created()生命周期钩子，以便我可以执行相应的功能。

我可以想到使用道具，但每次都必须将道具两层深处传递
还是有更好的方法吗？

Answer 1

您可以找到这样的父组件：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>

如何知道从哪个组件调用的子组件？

1 个答案: