[vue3] 부모 컴포넌트에서 자식 컴포넌트 함수 실행하기

보통 부모의 함수를 자식에서 쓸수있는 방법은 많이들 나오는데, 자식의 함수를 부모가 쓰는건 잘 찾아도 안나오고~ 찾아도 내가 쓰는 setup function버전으로는 안나와서 또 허공주먹질하다가 밥먹고오니까 갑자기 머리가 돌아가서 발견함. vue는 기본적으로 vue2, vue3(근데 setup function), vue3(근데 setup script) 이렇게 방법이 나뉘다보니 그거 찾느라 시간이 더 걸리는거같음...

 

 

1. setup function 버전에서 쓰는법

setup() {
  const active = () => {
    // something
  }
  
  return {
    active // 한번 return을 해줘야함
  }
}

자식 컴포넌트는 이렇게 있는데 일단 해당 함수를 return해줘야함

 

<template>
  <Child ref="child"></Child>
</template>

setup() {
  const child = ref(null);
  
  child.value[0].active();
}

부모 컴포넌트에서는 먼저 자식 컴포넌트에 ref로 변수를 할당함.

그리고 setup 함수 내에서 해당 변수를 ref()로 선언해주고, value.자식함수이름() 이렇게 불러주면 된다!

 

 

테스트는 안해봤지만 vue2에서는 그냥 this.$ref뭐 이런식으로 접근하면 된다고 하고, vue3(setup script)는 defineExpose({ 실행시킬함수이름 }) 이렇게 내보내주면 된다.