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.