vue3怎么替换默认的模板引用 ？

Question

子组件

import { propTypes } from '@/utils/propTypes'
import type { VxeTableInstance } from 'vxe-table'
import { Paging } from '@/components/Paging'
export default defineComponent({
  name: 'Vtable',
  props: {
    modelValue: propTypes.array.def([]),
    pager: propTypes.object.def({}),
  },
  setup(props, { emit, slots, attrs }) {
    const refTable = ref<VxeTableInstance>()
    return () => (
      <div class="table-container">
        <vxe-table
          ref={refTable}
          border
          max-height={tableHeight}
          data={props.modelValue}
        >
          {slots.default && slots.default()}
        </vxe-table>
        <Paging pager={props.pager} end />
      </div>
    )
  },
})
</script>

<template>
  <Vtable ref="vTable" v-model="tableData" :pager="pager" />
</template>

// 我想 vTable.value 可以直接访问到子组件的 refTable.value
const vTable = ref()

我该怎么做

Answer 1

ref 指向当前组件实例，无法替换（除非改源码，但是又会影响其他组件的 ref 使用）；
如果想访问子组件，可以用个自定义 ref

Answer 2

没写过这种jsx的组件，在setup语法糖中可以使用defineExpose将需要父组件访问的变量抛出，然后在父组件的nextTick()中使用watch或者watchEffect监听可以实现