请教一下，vue3+ts怎么才能获取组件里的方法、属性和实例?

Question

之前用的这种方式：
const { ctx } = getCurrentInstance();，
我看说生产环境下的 ctx 将访问不到，后来改成
const { proxy } = getCurrentInstance() as any 
这种方式获取，如图：

但是我取不到里面的内容，求解正确写法

Answer 1

使用$refs就可以了:

1. 组件设置ref值
   父组件调用子组件的时候设置ref值。

   <ChildVue ref="childRef" />

2. 组件实例获取
   设置完成后，vue3可以通过ref方法获取。

   const childRef = ref();

   这边变量的名字需要和上面ref的一致。如何直接打印childRef，这个时候会是：

   undefined

   因为页面组件还没有挂载完成，所以需要在挂载完成之后才能正常使用。

   onMounted(() => {
   console.log(childRef.value); // Proxy {…}
   });

3. 子组件内设置对外公开的变量
   上面第2步获取到子组件实例后，无法使用子组件内的方法，因为使用 script setup 的组件默认是关闭的，如果需要公开，需要使用 defineExpose 编译器宏。

   // 子组件代码
   const foo = () => {
     console.log("foo");
   }
   defineExpose({
     foo
   });
   父组件内调用：
   
   // 调用子组件方法
   childRef.value.foo(); // foo

   这样就可以调用到子组件的方法了。

完整代码:

父组件

<template>
    <ChildVue ref="childRef" />
</template>

<script setup lang="ts">
import { ref } from '@vue/reactivity';
import { onMounted } from '@vue/runtime-core';
import ChildVue from './Child.vue';

const childRef = ref();
console.log(childRef.value); // undefined

onMounted(() => {
    console.log(childRef.value); // Proxy {…}
    // 调用子组件方法
    childRef.value.foo(); // foo
});
</script>

<style>
</style>

子组件

<template>child demo</template>

<script setup lang="ts">
const foo = () => {
  console.log("foo");
}
defineExpose({
  foo
});
</script>

<style>
</style>

Answer 2

用ref呗 获取组件的实例的话
const { proxy } = getCurrentInstance() 这个里面的proxy相当于vue2的this 我公司开发的vue3项目都是这样写的 直接当this使用