Question

我在ChildComponent中有一个simpleMethod函数，可以调用父组件的函数，但是我有下一种情况：

ViewComponent扩展了LayoutComponent并在子组件内部。像这样：

ChildComponent：

<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，但我认为这没有效果或不是一个好习惯。

有什么主意吗？

Answer 1

子组件：

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

Answer 2

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

window.EventBus = new Vue（）;

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

 methods: {

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

    }

然后在任何组件（例如parent的parent！）中，您都可以收听事件：

 created() {           

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

    }

从子组件中调用父函数的父项

2 个答案: