Vue.js에서 자식 컴포넌트의 함수 호출하기 3가지

by

부모 컴포넌트와 자식 컴포넌트 사이의 효율적인 통신이 필요한 경우가 있습니다. 이 글에서는 Vue.js에서 자식 컴포넌트의 함수를 호출하는 다양한 방법을 알아보겠습니다.

Vue.js에서 자식 컴포넌트의 함수 호출하기 3가지


1. Props를 통한 메서드 전달

Props를 사용하여 부모 컴포넌트에서 메서드를 자식 컴포넌트로 전달하고, 자식 컴포넌트에서 해당 메서드를 호출하는 방법입니다. 이 방식은 Vue의 권장 방법 중 하나이며 컴포넌트 간 통신을 명확하게 합니다.


부모 컴포넌트:

<template>
  <div>
    <child-component :callChildMethod="callChildMethod" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  methods: {
    callChildMethod() {
      // 자식 컴포넌트의 메서드를 호출하는 로직
    },
  },
};
</script>


자식 컴포넌트:

<template>
  <div>
    <!-- 자식 컴포넌트 템플릿 -->
  </div>
</template>

<script>
export default {
  props: ['callChildMethod'],
  methods: {
    someChildFunction() {
      // 자식 컴포넌트의 함수 내부에서 부모 컴포넌트의 메서드 호출
      this.callChildMethod();
    },
  },
};
</script>


2. $refs를 사용

$refs를 사용하여 Vue.js에서 자식 컴포넌트의 메서드를 직접 호출하는 방법입니다. $refs는 Vue 컴포넌트를 참조하는 데 사용되며, 자식 컴포넌트의 메서드를 호출할 수 있습니다. 주의해서 사용해야 하며, 특정 상황에서만 사용해야 합니다.


자식 컴포넌트:

<template>
  <div>
    <!-- 자식 컴포넌트 템플릿 -->
  </div>
</template>

<script>
export default {
  methods: {
    someChildFunction() {
      // 자식 컴포넌트의 함수 내부 로직
    },
  },
};
</script>


부모 컴포넌트:

<template>
  <div>
    <child-component ref="childRef" />
    <button @click="callChildMethod">자식 컴포넌트 함수 호출</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  methods: {
    callChildMethod() {
      // $refs를 사용하여 자식 컴포넌트의 함수 호출
      this.$refs.childRef.someChildFunction();
    },
  },
};
</script>


3. 이벤트 버스 사용

Vue.js에서 이벤트 버스를 활용하여 자식 컴포넌트와 부모 컴포넌트 사이에 통신할 수 있습니다. 이 방법은 컴포넌트 간에 데이터를 주고받을 때 유용합니다.

이벤트 버스 생성:

// EventBus.js
import Vue from 'vue';
export const EventBus = new Vue();


자식 컴포넌트:

<template>
  <div>
    <!-- 자식 컴포넌트 템플릿 -->
  </div>
</template>

<script>
import { EventBus } from './EventBus.js';

export default {
  methods: {
    someChildFunction() {
      // 자식 컴포넌트의 함수 내부 로직
      // 이벤트를 발생시켜 부모 컴포넌트에 알림
      EventBus.$emit('child-method-called');
    },
  },
};
</script>


부모 컴포넌트:

<template>
  <div>
    <child-component />
    <button @click="callChildMethod">자식 컴포넌트 함수 호출</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';
import { EventBus } from './EventBus.js';

export default {
  components: {
    ChildComponent,
  },
  methods: {
    callChildMethod() {
      // 이벤트 리스너 등록
      EventBus.$on('child-method-called', () => {
        // 자식 컴포넌트의 함수 호출
      });
    },
  },
};
</script>

위와 같이 Vue.js에서 자식 컴포넌트의 함수를 호출하는 다양한 방법을 사용하여 컴포넌트 간 효율적인 통신을 구현할 수 있습니다. 상황에 맞게 적절한 방법을 선택하여 사용하세요.



Leave a Comment