最近很多朋友私我请教子组件实例的获取方法

解答:
vue2中可直接通过父组件内组件的ref读取子组件的实例,vue3有些许区别

vue3中需要在子组件中导出(暴露)相关实(你需要再父组件中调用)例方法:
子组件中

const getFileList = () => {
  const addFile = getAddFileList();
  const delFile = getDelFileList();

  return { addFile, delFile };
};
//使用此属性导出实例方法
defineExpose({
  getFileList
});

父组件中

// 读取子组件实例方法
<MultiFileUpload
   ref="uploadFileRef"
 />
 const uploadFileRef = ref<any>();
 const getFileRef = () => {
  const fileData = uploadFileRef.value.getFileList();
  return fileData;
};

只需以上步骤即可访问子组件实例方法。

Logo

前往低代码交流专区

更多推荐