Vue3 组件方法暴露给其他组件调用 defineExpose使用

.生产的驴2024-09-04 14:59

介绍

Vue2 父组件可以使用ref 调用子组件内部的方法，而vue3 无法直接通过ref进行调用内部方法，需要将组件的方法暴露。

子组件

将改方法暴露出去，给父组件调用

javascript 复制代码

import { ref, defineExpose } from 'vue'
function resetFrom() { //重置表单
    formRef.value.resetFields()
    regionList.value = []
    cityList.value = []
}

defineExpose({
    resetFrom //暴露方法
});

父组件

html 复制代码

<District ref="batchExtraction" 
 </District>

javascript 复制代码

const batchExtraction = ref(null)
function batchExtractionResetFrom() { //表单重置
    batchExtraction.value.resetFrom()  //调用子组件方法
}