Vue Data GridChild to Parent Communication

There are a variety of ways to manage component communication in Vue (shared service, local variables etc), but you often need a simple way to let a "parent" component know that something has happened on a "child" component. In this case the simplest route is to use the Grid's context feature to hold a reference to the parent, which the child can then access.

// Parent Grid Component
<template>
   <ag-grid-vue :context="context" ...other properties>
   </ag-grid-vue>
</template>

<script>
//...other imports
import {AgGridVue} from "ag-grid-vue3";
import CubeComponent from './CubeComponent.vue';

export default {
   components: {
       AgGridVue
   }
   data() {
       return {
           context: {}
       }
   },
   beforeMount() {
       this.context = {
           componentParent: this
       }
   },
   methods: {
       parentMethod() {
           // do something
       }
   }
   //...other properties & methods
}
</script>

// Child Grid Component
<template>
   <ag-grid-vue ...other properties>
   </ag-grid-vue>
</template>

<script>
//...other imports

export default {
   methods: {
       doSomethingOnGrid() {
           // the grid component can now be accessed via this.params.context.componentParent
           this.params.context.componentParent.parentMethod()
       }
   }
   //...other properties & methods
}
</script>

Note that although we've used componentParent as the property name here it can be anything - the main point is that you can use the context mechanism to share information between the components.

A working example of this can be found in the Cell Renderer docs.