解决Vue3.2父组件无法调用子组件方法问题

无效

父组件

视图
 <table-column-filter-dialog ref="tableColumnFilterDialogRef" :columns="columns" @handleFilterColumns="handleFilterColumns" />

模板
const tableColumnFilterDialogRef = ref(null)
// 处理表格列过滤显示
const displayFilterColumnsDialog = () => {
  // tableColumnFilterDialogRef.value.setDialogVisible(true, filterColumns.value)
  console.log('displayFilterColumnsDialog ~ tableColumnFilterDialogRef.value', tableColumnFilterDialogRef.value)
}

子组件

import {} from 'vue'
const test = () => {
  console.log('hahaha')
}

打印出来Taeget啥也没有

有效

Vue3.2引入了新的Api-defineExpose

需要在子组件暴露此方法

import { defineExpose } from 'vue'
const test = () => {
  console.log('hahaha')
}
defineExpose({ test })

来了来了，好兄弟