如何从子组件中调用父方法？

Question

我正在做一个项目，我需要从子组件中调用父方法之一。如何在Vue js中做到这一点？

Answer 1

当您想在父组件中触发方法时，应该在子组件内部使用this。$ emit（'myEvent'）。

然后在父级模板中找到您的子级组件，并在其上添加一个事件捕获器，如下所示：

<template>
  <your-child-component @myEvent="myMethod"/>
</template>

如果要向方法中添加参数，可以向发射中添加第二个参数，如下所示：

this.$emit("myEvent", "My parameter")

要实现此目的，只要调用的方法具有参数，就不必在事件“捕手”中进行任何更改。

Answer 2

也许工作示例会使其更加清晰。

https://m-vue-leaflet.netlify.app/

代码-https://github.com/manojkmishra/vue-leaflet-mapping

所以在这里，如果您看到components文件夹中有3个vue文件。 Brew.vue是BrewList.vue子组件的父组件。

Brew.vue-父组件

BrewList.vue-子组件

子组件BrewList.vue正在使用emit将通过鼠标浏览和通过鼠标离开浏览的值发送到父Brew.vue。另外，如果您对Brew.vue感兴趣，则父级会将Brew道具发送给BrewList.vue子级。

根据docs- https://vuejs.org/v2/guide/components.html#Listening-to-Child-Components-Events

Answer 3

理想情况下，这是正确的方法： https://vuejs.org/v2/guide/components.html#Listening-to-Child-Components-Events

另一方面，我相信在您的情况下（我试图假设这不太清楚），您可以使用this。$ parent.methodName。

请记住，第二个建议不太干净。应仅在需要时使用它。

Answer 4

所以基本上，有两种方法可以回答您的问题

1. 使用 $ emit ，语法为 @

2. 通过作为道具传递功能，语法为：与示例相同

如果您基于Vue文档和许多其他Vue教程，您会发现他们鼓励人们使用 $ emit 事件，而不是传递功能作为道具（您的使用方式）。您可以在此处阅读文档。

https://vuejs.org/v2/guide/components-custom-events.html https://vuejs.org/v2/guide/components.html#Emitting-a-Value-With-an-Event https://code.tutsplus.com/tutorials/design-patterns-for-communication-between-vuejs-component--cms-32354 vue, emitting vs passing function as props

原因是Vue的哲学是传递道具，向上发射事件。使用 $ emit 将有助于将触发的功能标记为Vue事件，因此您可以使用全局事件侦听器。这也可以帮助您区分数据流逻辑和事件流逻辑。

但是，将函数用作道具并没有错，实际上，可以将其用于实现相同的结果。以我的喜好，当我编写具有默认功能的组件时，我使用第二种方式，并且仅当父母通过另一个组件时，该功能才被覆盖。这将帮助我避免多次重写默认功能。

在其他情况下，我将使用第一种方式$ emit。

希望这会对您和其他人有所帮助。

Answer 5

回答我自己的问题，这将对其他人有帮助

我用props做到了这一点。通过props将父方法传递给子组件。并通过子组件进行访问。

在子组件中

props: ["lesson","fetchLessons"],

并在子组件中访问了类似的道具

this.fetchLessons();

父组件

<InstructorLesson  v-for="(lesson,index) in getFechedLessons" :lesson="lesson" :fetchLessons = "fetchLessons" v-bind:key="index"/>

我是vue js的新手，我不知道这是否是最好的方法。如果没有，请让大家知道正确的方法