How to obtain component instances in <script setup>

[FatNerdPeng]

Hello,I couldn't find how to obtain component instances under <script setup> syntax sugar in the official document. Can someone guide me? I have checked some information and it is said that the getCurrentInstance() method is used, but this method is not in the official documentation, and it is a method from Vue2, which may be discarded in the future. The official document provides a set of optional API functions to obtain properties on components, but my requirement is to obtain the context of component instances. I was unable to find any methods in the document, which caused me a headache. Thank you.

[Shyam-Chen]

For getting a hold of the internal instance in setup() - useful for advanced plugins

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

const instance = getCurrentInstance();
</script>

[FatNerdPeng]

Yes, the method you mentioned does work. However, as I mentioned earlier, this method is not included in the official documentation of Vue3, and the Vue team does not seem to recommend this method for Vue3 programs. Therefore, I would like to know if there is an alternative solution?

[Shyam-Chen]

Use ref.

<script lang="ts" setup>
import { ref } from 'vue';

// instance.vnode.el
const selfEl = ref<HTMLElement>();
</script>

<template>
  <div ref="selfEl">
    ...
  </div>
</template>

Others

<script lang="ts" setup>
// instance.slots
const slots = useSlots();

// instance.attrs
const attrs = useAttrs();
</script>

[LinusBorg]

I'd be interested to understand the usecase, that would make it easier to give a proper recommendation

[FatNerdPeng]

No problem.
I used the el-table component in element-plus which has an attribute height to control the height of the table:

Because everyone's computers are different, I hope this height can adapt to most browser resolutions. Therefore, I considered using the method of window. inerHeight - autoHeight to present the table(autoHeight is a suitable height what I think), so I wrote the following code:

By the way, I used nuxtjs here. I added a method called fitHeight to the nuxt instance, which requires the parameter to be the context of the component instance, so that it can define a property for the component that I have not declared inside the component, which is autoHeight:

My current confusion is how to obtain component instances or component contexts here. Although I obtained it using the getInstance() method here, to my knowledge, this method is from Vue2 and is not recommended for Vue3.

[LinusBorg]

1. Why do you want to set that through the component instance instead of through the height prop, like it seems to be intended?
2. If you really need the el-table's component instance, you would use a template ref for that, I'd say. getCurrentInstance() gives you the istance of the current .vue file (in simple terms), which does not seem to be what you need.