vue3.2父组件调用子组件方法报TypeError: xxxx is not a function

原创已于 2023-04-12 16:24:51 修改 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

于 2023-04-12 10:48:30 首次发布

在Vue.js应用中，父组件尝试调用子组件的清空多选表格方法时出现TypeError。问题在于子组件的方法没有正确暴露给父组件。解决方案是在子组件中使用`defineExpose`导出`getClearSelection`方法，从而使父组件能访问并执行这个方法来清除表格的多选状态。

项目场景：

例如：项目场景：父组件调用子组件里表格清空多选的方法

问题描述

报错：TypeError: xxxx is not a function

父组件

  <public-table ref="publicTableRef"/>
  
  <script setup>
	const publicTableRef = ref()
	
	const getSonClear = () => {
      publicTableRef.value.getClearSelection()
    }
  </script>

子组件

   <el-table
    :data="tableData"
    :border="border"
    style="width: 100%"
    row-key="id"
    max-height="620"
    ref="tableRef"
    lazy
    @selection-change="handleSelection"
  />
  
  <script setup>
	const tableRef = ref()
	
	// 清空多选方法
	const getClearSelection = () => {
	  tableRef.value.clearSelection()
	}
  </script>

解决方案：

需要在子组件里用defineExpose导出方法，列如：

子组件

   <el-table
    :data="tableData"
    :border="border"
    style="width: 100%"
    row-key="id"
    max-height="620"
    ref="tableRef"
    lazy
    @selection-change="handleSelection"
  />
  
  <script setup>
	const tableRef = ref()
	
	// 清空多选方法
	const getClearSelection = () => {
	  tableRef.value.clearSelection()
	}
	
	defineExpose({
  	  getClearSelection
	})
  </script>