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

Question

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

Answer 1

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

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

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

如果你想向你的方法添加参数，你可以像这样向你的发射添加第二个参数：

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

为此，您不必更改事件“catcher”中的任何内容，只要您调用的方法具有参数即可。

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 使用发射将 mouse-over-brew 和 mouse-leave-brew 值发送到父 Brew.vue。此外，如果您有兴趣 Brew.vue 父将 brew prop 发送到 BrewList.vue 子。

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

Answer 3

2021 年 12 月更新：

它适用于$emit. 父组件中@callTest的名称必须与子组件中$emit(' callTest ')的名称相同。

父组件：

<template>
  <Child
    @callTest="test" // Assign 'test' method to @callTest
  />
</template>

<script>
import Child from "../components/Child.vue";
import { defineComponent } from "vue";

export default defineComponent({
  name: "Parent",

  components: {
    Child,
  },

  methods: {
    test() {
      alert("Test");
    },
  }
});
</script>

子组件：

<template>
  <button @click="$emit('callTest')">Click Me</button>
</template>

<script>
import { defineComponent } from "vue";
    
export default defineComponent({
  name: "Child",
});
</script>

同样，父组件中@callTest的名称必须与子组件中$emit(' callTest ')的名称相同。

$emit如果在section中使用script，this则需要与templatesection不同。

子组件：

<template>
  <button @click="message">Click Me</button>
</template>

<script>
import { defineComponent } from "vue";
    
export default defineComponent({
  name: "Child",
  methods: {
    message() {
      this.$emit('callTest') // 'this' is needed.
    }
  }
});
</script>

如果test方法有2 parameters，您需要在子组件中调用test方法，2 arguments如下所示。

父组件：

<template>
  <Child
    @callTest="test" // Assign 'test' method to @callTest
  />
</template>

<script>
import Child from "../components/Child.vue";
import { defineComponent } from "vue";

export default defineComponent({
  name: "Parent",

  omponents: {
    Child,
  },
        
  methods: {
    test(num1, num2) { // 'test' method has 2 parameters.
      alert(num1 + num2);
    },
  }
});
</script>

子组件：

<template>       // Call 'test' method with 2 arguments.                          
  <button @click="$emit('callTest', 3, 5)">Click Me</button>
</template>

<script>
import { defineComponent } from "vue";
        
export default defineComponent({
  name: "Child",
});
</script>

Answer 4

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

在子组件中

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

并在子组件中访问这样的道具

this.fetchLessons();

父组件

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