하위 컴포넌트에서 부모 메서드를 호출합니다(Vue.js).

하위 컴포넌트에서 부모 메서드를 호출합니다(Vue.js).

프로젝트를 진행 중인데 하위 구성 요소에서 부모 메서드를 호출해야 합니다.Vue.js에서 이를 실현하려면 어떻게 해야 합니까?

를 사용해 주세요.this.$emit('myEvent')상위 구성 요소에서 메서드를 트리거할 때 하위 구성 요소 내부.

그런 다음 부모 템플릿에서 자식 구성 요소를 찾고 다음과 같이 이벤트 수집기를 추가합니다.

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

메서드에 파라미터를 추가하려면 다음과 같이 두 번째 파라미터를 내보내기에 추가할 수 있습니다.

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

호출하는 메서드에 파라미터가 있는 한 이벤트 "catcher"에서 아무것도 변경할 필요가 없습니다.

예를 들면 좀 더 명확하게 할 수 있을 겁니다.

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

코드 - https://github.com/manojkmishra/vue-leaflet-mapping

컴포넌트 폴더에 3개의 vue 파일이 있습니다.Brew.vue는 BrewList의 부모 컴포넌트입니다.vue 하위 구성 요소.

Brew.vue - 부모 컴포넌트

BrewList.vue - 자 컴포넌트

하위 컴포넌트 BrewList.vue는 이미트를 사용하여 mouse-over-brew 및 mouse-leave-brew 값을 부모 Brew.vue로 전송합니다.그리고 Brew가 관심있다면.vue 부모가 BrewList에 brew 소품을 보내고 있습니다.아이에 대해서.

문서에 따르면 - https://vuejs.org/v2/guide/components.html#Listening-to-Child-Components-Events

2021년 12월 갱신:

와 함께 동작합니다.부모 컴포넌트의 @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') 이름과 같아야 합니다.

---

섹션에서 를 사용하는 경우 섹션과 다르게 필요합니다.

하위 구성 요소:

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

---

메서드에 가 있는 경우 다음과 같이 자 컴포넌트를 사용하여 메서드를 호출해야 합니다.

상위 컴포넌트:

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

이상적으로는, 이 방법이 올바른 방법입니다.https://vuejs.org/v2/guide/components.html#Listening-to-Child-Components-Events

한편, 저는 당신의 시나리오를 믿고 있습니다(확실하지 않기 때문에 상정하고 있습니다).$parent.methodName.

두 번째 제안은 덜 깨끗하다는 점에 유의하십시오.그것은 만일의 경우에 사용해야 한다.

따라서 기본적으로 두 가지 방법으로 질문에 대답할 수 있습니다.

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, 소품으로서의 방출 vs 통과 기능

그 이유는 Vue 철학이 소품을 전달하고 사건을 위로 발산하기 때문입니다.$emit을 사용하면 Vue 이벤트로 트리거된 함수를 마킹할 수 있으므로 글로벌이벤트 리스너를 사용할 수 있습니다.또한 데이터 흐름 로직과 이벤트 흐름 로직을 분리하는 데 도움이 될 수 있습니다.

그러나 기능을 소품으로 사용하는 것은 잘못된 것이 아니며, 실제로 동일한 결과를 얻기 위해 사용할 수 있습니다.기본 기능을 가진 컴포넌트를 작성할 때 두 번째 방법을 사용하며, 부모가 다른 컴포넌트를 통과했을 때만 기능이 덮어쓰게 됩니다.이렇게 하면 기본 함수를 여러 번 다시 쓰는 것을 피할 수 있습니다.

나머지 케이스는 첫 번째 방법 $emit을 사용합니다.

부모

<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' });
      }
  }

소품을 사용하여 이 작업을 수행했습니다. 소품을 통해 부모 메서드를 자식 구성 요소에 전달하고 자식 구성 요소에서 액세스했습니다.

하위 구성 요소

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

아동용 부품에 있는 이런 소품들에 접근해서

this.fetchLessons();

부모 성분

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

언급URL : https://stackoverflow.com/questions/61998500/call-parent-methods-from-child-components-vue-js