Vue3 defineExpose 怎么精确暴露子组件方法？

Question

仓乃文 · Accepted Answer

子组件暴露方法：
```javascript
// ChildForm.vue
const formRef = ref(null);
const validate = async () => {
  return await formRef.value?.validate();
};
const resetFields = () => {
  formRef.value?.resetFields();
};
defineExpose({ validate, resetFields });  // 只暴露这两个方法
```

父组件调用：
```javascript
// Parent.vue
const childRef = ref(null);
const handleSubmit = async () => {
  const valid = await childRef.value.validate();
  if (!valid) return;
  // 提交逻辑
};
const handleReset = () => {
  childRef.value.resetFields();
};
```

补充说明：
- 不用 defineExpose 的话，父组件 ref 拿到的是 {}，无法访问任何内部方法
- 只暴露必要的接口，不要暴露内部状态，保持封装性
- defineExpose 暴露的内容可以在模板 ref 上直接调用
- 与 React 的 useImperativeHandle 思路一致，都是控制对外暴露的接口