[Vue] 다른 컴포넌트에서 발생한 이벤트 수신 방법 (AgGrid api)

AgGrid의 gridApi

AgGrid의 gridApi는 AgGrid 인스턴스에 대한 프로그래밍적인 제어를 제공합니다. gridApi를 사용하면 셀, 행, 열 등의 요소들에 대한 액세스 및 조작이 가능해집니다.

 

https://sumni.tistory.com/108

AgGrid Options

 

AgGrid 컴포넌트에서 onGridReady 메소드가 호출될 때, gridApi와 gridColumnApi를 컴포넌트의 데이터에 할당하고 있습니다. 이 데이터는 AgGrid 컴포넌트의 인스턴스 내부에서만 사용 가능합니다.

이를 다른 컴포넌트에서 사용하기 위해서 아래의 방법으로 girdApi를 전달할 수 있습니다.

 

$emit() 메소드와 $on() 메소드

이벤트를 발생시키는 컴포넌트에서 Vue의 $emit() 메소드를 사용하고, 이벤트를 수신하는 컴포넌트 에서는 $on() 메소드를 사용합니다.

 

예를 들어, AgGrid.vue 컴포넌트에서 gridApi를 AgGridSample.vue 컴포넌트에 전달하는 코드입니다.

//AgGrid.vue 일부코드
<template>
  <div style="height: 100%; width: 100%">
    <div class="example-wrapper">
      <div class="example-header" style="background: #ffdddd">Rows in this example do not move, only events are fired</div>
      <ag-grid-vue
        class="ag-theme-alpine"
        style="height: 500px"
        :column-defs="columnDefs"
        :row-data="rowData"
        :default-col-def="defaultColDef"
        row-selection="multiple"
        :animate-rows="true"
        :row-drag-managed="true"
        :enable-cell-change-flash="true"
        @grid-ready="onGridReady"
      >
      </ag-grid-vue>
    </div>
  </div>
</template>

import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
import { AgGridVue } from 'ag-grid-vue3';

export default {
  name: 'AgGrid',
  components: {
    AgGridVue
  },
  data: function () {
    return {
      columnDefs: [
        { field: 'athlete', rowDrag: true },
        { field: 'country' },
        { field: 'year', width: 100 },
        { field: 'date' },
        { field: 'sport' },
        { field: 'gold' },
        { field: 'silver' },
        { field: 'bronze' }
      ],
      gridApi: null,
      columnApi: null,
      defaultColDef: {
        width: 170,
        sortable: true,
        filter: true,
        flex: 1,
        minWidth: 100,
        resizable: true
      },
      rowData: null
    };
  },
  created() {},
  methods: {
    onGridReady(params) {
      this.gridApi = params.api;
      this.gridColumnApi = params.columnApi;
      this.$emit('grid-ready', this.gridApi);
      let locale = this.$i18n.locale;
      for (let i = 0; i < this.columnDefs.length; i++) {
        let field = this.columnDefs[i]['field'];
        let headerName = this.$i18n.t(field);
        this.columnDefs[i]['headerName'] = headerName;
      }
      const updateData = data => {
        this.gridApi.setRowData(data);
      };

      fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
        .then(resp => resp.json())
        .then(data => updateData(data));
    },
 }

//AgGridSample.vue
<template>
  <div>
    <ul class="aggridsample">
      <li style="height: 100px; width: 500px"><AgGrid @grid-ready="onGridReady"></AgGrid></li>
    </ul>
  </div>
</template>
<script>
import AgGrid from '@/components/lib/aggrid/AgGrid.vue';

export default {
  name: 'AgGridSample',
  components: {
    AgGrid
  },
  methods: {
    onGridReady(gridApi) {
      // gridApi.setColumnDefs([
        //   { field: 'athlete', rowDrag: true },
        //   { field: 'country' },
        //   { field: 'test', width: 100 },
        // ]);
    }
  }
};
</script>

Vue에서는 이벤트를 사용하기 위해 v-on 또는 @ 기호를 사용합니다. 따라서, @grid-ready="onGridReady" 구문은 AgGrid 컴포넌트의 grid-ready 이벤트를 수신하고, 해당 이벤트가 발생하면 onGridReady 메소드를 호출하도록 합니다.

 

이렇게 하면 $emit() 함수의 파라미터로 전달된 gridApi를 받아서 agGrid에 대한 작업을 수행할 수 있습니다.