Vue 부모 컴포넌트에서 이벤트 발생시 자식 컴포넌트에 있는 함수 호출하기

상황

ListPage.vue 컴포넌트(부모)에 검색이 가능한 로직과 공통으로 사용하는 DataTable.vue 컴포넌트(자식)가 있고 부모 컴포넌트 내의검색 로직안의 검색 버튼을 눌렀을때 검색 조건에 맞는 데이터를 불러와야함!

<template>
	<div>
		<!-- 데이터 검색 로직 -->
    	<button>검색</button>
    </div>
    <data-table />
</template>

<script>
import DataTable from "@/components/common/DataTable.vue";

export default {
	name: "ListPage",
	components: { DataTable },
}
</script>

ref

ref를 사용해 컴포넌트에 참조를 할당하면 해당 컴포넌트 인스턴스에 직접적으로 접근할 수 있다.

1. 컴포넌트 인스턴스에 직접 적급해 속성을 변경할 수 있다.
2. 컴포넌트의 메서드를 호출할 수 있다.
3. 컴포넌트의 라이프사이클 훅에 접근할 수 있다.

ref를 사용해 기능 적용한 코드

ListPage.vue(부모 컴포넌트)

<template>
	<div>
		<!-- 데이터 검색 로직 -->
    	<button  @click="handleSearch">검색</button> <!-- 검색 버튼 클릭시 handleSearch 함수 호출 -->
    </div>
    <data-table ref="dataSearch"/> <!-- ref를 사용해 해당 컴포넌트의 인스턴스에 접근 -->
</template>

<script>
import DataTable from "@/components/common/DataTable.vue";

export default {
	name: "ListPage",
	components: { DataTable },

    methods: {
      handleSearch() {
		// $refs를 사용해 dataSearch 참조에 접근하여 dataSearch() 메서드를 호출
        this.$refs.dataSearch.dataSearch();
      },
    }
}
</script>

DataTable.vue(자식 컴포넌트)

<template>
    <v-data-table-server
		데이터 테이블 옵션
    />

</template>

<script>
export default {
	name: "DataTable",

    methods: {
      dataSearch() {
		// ListPage.vue(부모 컴포넌트)에서 검색 버튼 클릭시 로직
      }
	}
</script>