vue3项目，通过defineComponent创建的组件，在父组件中想通过ref拿到该组件内部的方法，从控制台看，ref对象中没有相关属性，这是为什么，正确要怎么做？

Question

子组件内容：

const CesiumMap = defineComponent<Props>((props, { slots, emit, attrs }) => {
  // 要在父组件访问setMapInfo这个方法
  const setMapInfo = () => {
    // TODO
  };

  return () => {
    return (
      <div class="tsd-mapContainer">
        子组件
      </div>
    )
  }
})

父组件内容：

import CesiumMap from '@/components/Map';

interface Props {};

const MainPage = defineComponent<Props>((props, { slots, emit, attrs }) => {
  const cesiumRef = ref<typeof CesiumMap | null>(null);
  /**
   * 点击数据检索输入框右边框选查询按钮
   */
  const handleKuangxuan = (type: string, open: boolean) => {
    console.log('cesiumRef:::', cesiumRef)
  };

  return () => {
    return (
      <div class="tsd-mainpage">
        <CesiumMap ref={cesiumRef} />
        <DataQuery
          onKuangxuan={handleKuangxuan}
        />
      </div>
    )
  }
});

cesiumRef的内容如下：

补充：
通过这样来写，是正常能访问到的，但我不太想这么写：

export default defineComponent({
  name: 'CesiumMap',
  setup(props, { emit }) {
    const user = ref('测试')
    const exportFile = () => {
      emit('exportShpFile');
    };
    return {
      user,
      exportFile
    }
  },
  render() {
    return (
      <div>
        { this.user }
      </div>
    );
  }
});

Answer 1

没试过，但是通过看defineComponent的文档，你可以试试看，能否在defineComponent的第二个参数对象中，添加expose属性。

如果不行的话，也可以在onMounted中将要暴露给父组件的方法/属性，emit给父组件

Answer 2

// ChildComponent.vue
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'ChildComponent',
  setup() {
    const setMapInfo = () => {
      console.log('setMapInfo called');
    };

    return {
      setMapInfo,
    };
  },
});

// ParentComponent.vue
import { defineComponent, ref, onMounted } from 'vue';
import ChildComponent from './ChildComponent.vue';

interface ChildComponentInstance {
  setMapInfo: () => void;
}

export default defineComponent({
  name: 'ParentComponent',
  components: {
    ChildComponent,
  },
  setup() {
    const childRef = ref<ChildComponentInstance | null>(null);

    onMounted(() => {
      if (childRef.value) {
        childRef.value.setMapInfo();
      }
    });

    return {
      childRef,
    };
  },
});