How to access this.$parent in vue 3 composition api ? I need to access the parent component props and data but seems like with vue 3 composition setup api its not available , please suggest an alternative

[maersk-ps]

I am trying to migrate from vue 2 to vue 3 and while doing that I encountered a code where I was using this.$parent in old code .

Parent component template:

<div>
    <slot />
</div>

Child component template:

<template>
     <div> {{parentData}} </div>
</template>

<script>
const parentData = this.$parent.props.myData
</script>

Now the above line needs to be changed to vue 3 composition api setup

I tried getCurrentInstance, but seems like it is an internal api and not officially documented .
Provide/Inject seems to be too much as I have only one prop to be accessed.

Basically I need to know how can we access the parent component in vue 3 composition api
OR
How to replace this.$parent in vue 3 composition

Any suggestions ?

[Shyam-Chen]

Use getCurrentInstance:

<script lang="ts" setup>
import { onMounted, getCurrentInstance } from 'vue';

onMounted(() => {
  const instance = getCurrentInstance();
  console.log(instance.parent.props);
});
</script>

<template>
  <div></div>
</template>

https://play.vuejs.org/#eNqNU02P0zAQ/SvGl2alkgjtraRBUK3EIgEVIHHxJUqmqRfHtvxRKkX574ztJLtoq+320GTmvbHfzLwM9KPW+ckD3dDSNoZrR0Qtuy2jzjJKLDivKyZ5r5VxZCAGDmQkB6N6ssKy1XsmF3RfG5BuAvMiheHwwJo4uyMX7UKJ0cxgslHSOtLbjmzDRdnqMwihyG9lRPtmdYOcskgiURIGDnotagcYEVIe31XDEKvHsSwwilkutXfk9LZXLQhsC3FGYzmCk+INJp9ABH9lElqkQ6ZeMCiL5VK6xhmh5APv8gerJI5wCGxGG9VrLsB8145jS4xuSEQCVmNHf7/EnDMe1nO+OULz50L+wZ5DjtG9AQvmBIwumKtNBy7Bdz+/wRnfFxAb9gLZL4A/wCrhg8ZE++Rli7Kf8KLa+7g6Lrtf9u7sQNq5qSA0MMfIZxQXuXuh9Ue5t/ltrGNyxCkuLnitCZX8qrx00K4JHrjzJiznHr1Tywae23OhZ9kN2VZJUPIan4u2F07KguMSUwnIheqymZ/rZG5tlLaBNl5zZ8tPVVmE//9MxCQO4PFLuTKBFg5cwj5cWsYu0LIfNsQ6g9sJKqqo+aoOK5RDNdPjkqjxH7wtZCY=

[AlexZhong22c]

getCurrentInstance is a hidden api. And suggested not to be used in app production

[zedmartins]

So... How to do it without the getCurrentInstance?

[dipak-telangre]

getCurrentInstance() returns null object

[typed-sigterm]

getCurrentInstance() returns null object

You must call that in the top level of <script setup> or a lifecycle hook, and before any awaits.

[LinusBorg]

You use provide/inject

[zedmartins]

Thanks!

[tillum]

I know this is ooooold, but i've been searching for hours now.

I want to use provide/inject.
But what i want to provide, includes a generic type.
As i want to expose this, via a slot binding further "down the rabbithole", all i can get is to unknown[]
Are there any good ways to pass down T to child components, without the user having to bind everything by hand?

[typed-sigterm]

@tillum Consider a child component, how can it know what T is in the parent component? Therefore it is unimplementable :(