vue3 + tsx 使用ref 获取子组件的值（antd vue）

使用tsx定义的父组件通过ref，获取子组件（tsx）里面的属性。

父组件（.tsx）

import { defineComponent, ref } from 'vue'
import Test from '@/components/bpmn/bpmnComponents/test'

export default defineComponent({
  name: 'demo-ref-tsx',
  setup() {
    const tsxRef = ref()

    const onBtnClick2 = () => {
      if (tsxRef.value) {
        // eslint-disable-next-line no-unused-expressions
        tsxRef.value.showDrawer('parent')
      }
    }
    return () => (
      <>
        <div style="margin-top: 10px;">
          <Test ref={tsxRef} />
          <a-button onClick={onBtnClick2}>parent button</a-button>
        </div>
      </>
    )
  }
})

子组件（.tsx）

import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'Test',
  setup(_, context) {
    const visible = ref(false)
    const showDrawer = () => {
      visible.value = true
      console.log(visible.value, 'showDrawer');
    }
    const onClose = () => {
      visible.value = false
      console.log(visible.value, 'onClose');
    }
    // 使用 expose 暴露组件内部的方法
    context.expose({ showDrawer })

    return () => (
      <a-drawer
        v-model:visible={visible.value}
        title="Basic Drawer"
        placement="right"
        onClose={onClose}
      // onAfterVisibleChange="afterVisibleChange"
      >
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </a-drawer>
    )
  }
})