Pass parent component in ag-grid context with vue3 composition API

Question

I want to bubble up an emit from a child component in ag-grid using vuejs 3. My strategy is to pass the parent component down with the composition API using <script setup> for use in the child component. The manual shows me how to do this with <setup>, but is silent using this syntactic sugar. The problem is that this is empty when passing the parent component. https://www.ag-grid.com/vue-data-grid/component-communication/

// Parent Component
<script setup>
const context = ref(null)

const emit = defineEmits(['action'])

onBeforeMount(() => {
  context.value = {
    componentParent: this
  }
})
</setup>

<template>
  <AgGridVue
    :context="context"
  />
</template>

// Child component (cellRenderer)
<script setup>
const props = defineProps({
  params: Object,
})

const fun = () => {
  params.context.componentParent.emit('action')
}
</script>

<template>
  <button @click="fun">Click me</button>
</template>

Suman Sunuwar · Accepted Answer · 2023-08-30 09:43:13Z

1

To access parent (function/reactive variable) you need to pass (function/reactive variable) inside context.value in onBeforeMount Hook. That means you simply have to define/pass whatever parameters you like to use.

// Parent Component
<script setup>
const context = ref({})


const parentFunction = (e) => {
    console.log("parent function called", e)
}

const parentData = ref(null)

onBeforeMount(() => {
  context.value = {
    // define function or reactive data you want to access from child
    // below data or function can be accessed by child
    parentData, 
    parentFunction,
  }
})
</setup>

<template>
  <AgGridVue
    :context="context"
  />
</template>

// Child component (cellRenderer)
<script setup>
const props = defineProps({
  params: Object,
})

// to access function of parent component
const fun = (params) => {
  params.context.parentFunction(params.data)
}

// to change parent component parentData
const fun = (params) => {
  params.context.parentData = "to change value"
}
</script>

<template>
  <button @click="fun(params)">Click me</button>
</template>

edited Aug 30, 2023 at 9:43

answered Jun 8, 2023 at 15:43

Suman Sunuwar

361 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Super Kai - Kazuya Ito Over a year ago

You should add explanation.

Mathieu Dhondt Over a year ago

How on earth did you find this information?

Collectives™ on Stack Overflow

Pass parent component in ag-grid context with vue3 composition API

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related