從子組件調用父方法（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 使用 emit 將 mouse-over-brew 和 mouse-leave-brew 值發送到父 Brew.vue。 此外，如果您有興趣 Brew.vue 父級將 brew prop 發送到 BrewList.vue 子級。

根據文檔- https://v2.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 ') 的名稱相同。

---

如果您在script部分使用$emit ， this需要與template部分不同。

子組件：

<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 ，則需要在子組件中調用帶有2 arguments的test方法，如下所示。

父組件：

<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

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

另一方面，我相信你的場景（我試圖假設它不是很清楚），你可以使用 this.$parent.methodName。

請記住，第二個建議不太干凈。 它應該僅在需要時使用。

Answer 5

所以基本上，有兩種方法可以回答你的問題

1. 使用$emit ，語法為@

2. 將 function 作為道具傳遞，語法為：與您的示例相同

如果您基於 Vue 文檔和許多其他 Vue 教程，您會看到它們鼓勵人們使用$emit事件，而不是將function 作為道具傳遞（您使用的方式）。 您可以在此處閱讀的文檔。

https://v2.vuejs.org/v2/guide/components-custom-events.html https://v2.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，發射與傳遞 function 作為道具

原因是 Vue 的理念是向下傳遞 props，向上發射事件。 使用$emit將有助於將觸發的 function 標記為 Vue 事件，因此您可以使用全局事件監聽器。 這也可以幫助您區分數據流邏輯和事件流邏輯。

但是，使用 function 作為 props 並沒有錯，實際上也可以用來達到同樣的效果。 在我的偏好中，當我編寫一個具有默認 function 的組件時，我使用第二種方式，並且 function 僅在父母通過另一個時被覆蓋。 這將幫助我避免多次重寫默認函數。

對於其他情況的rest，我將使用第一種方式$emit。

Answer 6

我用 props 做到了這一點。通過 props 將父方法傳遞給子組件。 並從子組件訪問。

在子組件中

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

並在子組件中訪問這樣的道具

this.fetchLessons();

父組件

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

Answer 7

家長

<complited v-on:passData="fromChild" />

  methods: {
      fromChild(data) {
        if (data.methodCall) return this[data.methodCall]();
      }

      aFunction() {
        alert('function: a');
      }

      bFunction() {
        alert('function: b');
      }
  }

孩子

<template>
   <div>
    <button @click="parentCall()">Call Parent Function
    </button>
   </div>
  </template>
  methods: {
      parentCall() {
        this.$emit("passData", {methodCall: 'aFunction' });
      }
  }