javascript - 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.vueimport { defineComponent, ref } from 'vue';export default defineComponent({  name: 'ChildComponent',  setup() {    const setMapInfo = () => {      console.log('setMapInfo called');    };    return {      setMapInfo,    };  },});// ParentComponent.vueimport { 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,    };  },});