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

부모 컴포넌트에서 자식 컴포넌트의 props에 맞춰 데이터를 넘기다 부모에서 자식 컴포넌트 안에 있는 함수를 실행을 할 수는 없을까?

하고 찾아보았는 데 있었다... 아직 모르는 게 너무 많은 듯하다.

 

(테스트는 NuxtJS에 VuetifyJS가 적용된 프로젝트에서 테스트했습니다.)

---

간단한 예제 

부모 컴포넌트 소스

<template>
  <v-layout column>
    <v-flex class="mt-4 ml-9">
      <v-row>
        <v-col cols="12" align="start">
          <h2>부모 컴포넌트에서 자식 컴포넌트 함수 실행</h2>
        </v-col>
      </v-row>
    </v-flex>

    <v-flex class="ma-4">
      <v-row class="px-4">
        <v-col cols="12">
          <v-card outlined>
            <v-card-title>부모 컴포넌트</v-card-title>
            <v-card-text>
              <test ref="childComponent"/>
            </v-card-text>
            <v-card-text>
              <v-btn @click="run">run1!!</v-btn>
              <v-btn @click="run2(true)">run2!!</v-btn>
              <v-btn @click="run2(test)">run3!!</v-btn>
            </v-card-text>
          </v-card>
        </v-col>
      </v-row>
    </v-flex>

  </v-layout>
</template>

<script>
import test from '~/components/test1'
export default {
  data() {
    return {
      test: 'Parent data...',
    }
  },
  components:{
    test
  },
  methods: {
    run() {
      console.log('btn run : ', this.$refs.childComponent);
      this.$refs.childComponent.func1();
    },
    run2(v) {
      console.log('btn run2 : ', this.$refs.childComponent);
      console.log(v);
      this.$refs.childComponent.func2(v);
    },
  }
}
</script>

<style>

</style>

컴포넌트에 ref 값을 넣어주면 된다.

this.$refs.컴포넌트에 입력된 ref명.실행할 함수

이런 식으로 하면 된다.

run()에 있는 console.log 정보를 봐보면 이렇다.

자식 컴포넌트에 적용되어 있는 많은 정보들을 확인할 수 있다.

노란색으로 칠해진 부분이 자식 컴포넌트에 있는 methods와 data 정보이다.

 

자식 컴포넌트 소스

<template>
  <v-card outlined raise>
    <v-card-title>자식 컴포넌트</v-card-title>
    <v-card-text>
      Hi!...  {{title}}
    </v-card-text>
  </v-card>
</template>

<script>
export default {
  data() {
    return {
      title: '',
      text: '',
    }
  },
  created() {
    console.log('created!');
  },
  methods: {
    func1() {
      console.log('run child component func1!!!');
    },
    func2(v) {
      console.log('run child component func2!!! : ', v);
      this.title = v;
    }
  }
}
</script>

<style>

</style>

data나 methods를 확인해보면 위에 사진이랑 일치한다.

 

위 소스들의 처음 화면

 

- 부모 컴포넌트의 run1!! 버튼을 누르면 나오는 결과

자식 컴포넌트의 func1() 함수가 실행된 모습

 

- run2!! 버튼 결과

- run3!! 버튼 결과

run3의 결과

이런 식으로 데이터를 넘겨서 함수를 실행하는 것도 가능하다.

 

그리고 그럼 데이터를 가져오는 것도 가능하지 않을까?라는 생각으로 해봤다.

자식 컴포넌트

자식 컴포넌트 data() 안에 test1~5까지 문자, 정수, 오브젝트, 배열등을 넣어 봤고

 

부모 컴포넌트에 확인해보기 위해 버튼과 함수를 만들었다.

부모 컴포넌트 버튼 추가

부모 컴포넌트 함수

버튼을 누른 결과는 이렇다.

가져온 결과

안되지 않을까 했었는데 된다...

 

잘 활용하면 유용하게 쓸 수 있을 것 같긴 하다.

 

---

이걸 응용해 confirm 컴포넌트도 만들어 보았다.

https://minu0807.tistory.com/107

[VueJS] NuxtJS+Vuetify confirm 컴포넌트 만들어보기