从子组件调用父函数的父级

Posted 2021-03-30

我在Child Component中有一个简单的Method函数，它调用父组件的一个函数，但我有下一个情况：

ViewComponent扩展了一个LayoutComponent，并在Child Component中。像这样的东西：

子组件：

<template>
  <button @click="simpleMethod">smth</button>
</template>
<script>
...
methods: {
  simpleMethod() {
    this.$parent.parentFunction()
  }
}
</script>

ViewComponent：

<template>
  <onepage-layout>
    <child-component></child-component>
  </onepage-layout>
</template>
<script>
...
methods: {
  parentFunction() {
    console.log('I want to fire this function...')
  }
}
</script>

因此，当子组件触发simpleMethod函数时，它会在OnePageLayout组件中搜索函数而不是ViewComponent。

我认为我可以在OnePageLayout中创建一个parentFunction，就像子组件中的那个一样，但我想这不是很有效或者很好的做法。

任何的想法？

答案

子组件：

<template>
  <button @click="simpleMethod">smth</button>
</template>
<script>
...
methods: {
  simpleMethod() {
    this.$emit('callParentFunction'); // emit an event to parent
  }
}
</script>

ViewComponent：

<template>
  <onepage-layout>
    <child-component @callParentFunction="parentFunction"></child-component>
  </onepage-layout>
</template>
<script>
...
methods: {
  parentFunction() {
    console.log('I want to fire this function...')
  }
}
</script>

你可以参考我的另一个answer。

父母和孩子之间的沟通应该使用Props down事件，而不是通过this.$parent.function()直接调用函数。你应该$emit('callFunc')然后@callFunc="function"。

另一答案

实现此目的的一个好方法是使用新的vue实例作为事件总线：

window.EventBus = new Vue（）;

在您的子组件中，您可以运行childFunction：

 methods: {

        childFunction() {
            EventBus.$emit('call-parent-function')
        }

    }

然后在任何组件（如父级的父级！）中，您可以收听该事件：

 created() {           

        EventBus.$on('call-parent-function', () => {
            this.parentFunction();
        })

    }