javascript - Vue组合API调用子组件方法
问题描述
TLDR;在 v2this.$refs
中,这项工作可以完成,但我如何在 v3 组合 API 中做到这一点?
我正在尝试在Vue3中使用PrimeVue的CustomUpload功能,但是该API在上传文件后不会清除上传文件,我需要clear()
在父组件中调用子组件的方法来清除文件并刷新按钮。
这是我的 App.vue
<template>
<FileUpload
name="upload"
url="/"
mode="basic"
:auto="true"
:maxFileSize="26214400"
:fileLimit="1"
:customUpload="true"
@uploader="upload"
/>
<Button name="lalaal">qweeq</Button>
</template>
<script>
import FileUpload from 'primevue/fileupload'
export default {
setup() {
const upload = e => {
console.log('testing', e)
}
return { upload }
},
components: {
FileUpload
}
}
</script>
谢谢
解决方案
您可以使用模板 ref然后使用uploadFile.value
而不是this.$refs.uploadFile
:
<template>
<FileUpload
ref="uploadFile"
name="upload"
url="/"
mode="basic"
:auto="true"
:maxFileSize="26214400"
:fileLimit="1"
:customUpload="true"
@uploader="upload"
/>
<Button name="lalaal">qweeq</Button>
</template>
<script>
import FileUpload from 'primevue/fileupload'
import {ref} from "vue";
export default {
setup() {
const uploadFile=ref(null)
const upload = e => {
console.log('testing', e)
}
return { upload,uploadFile}
},
components: {
FileUpload
}
}
</script>
推荐阅读
- mysql - 如何在sqlite中为连接表编写where子句并获取删除= 0的所有联系人
- java - 对抛出的任何异常做出反应
- javascript - 抓取以下载由 javascript 处理的文件
- python - PyTorch:'ToTensor()' 将彩色图像变成 9 张灰度图片
- c# - 如何使用 retry-after 标头使用 asp.net http 客户端轮询 API
- android - 在我的苹果和安卓应用程序中添加付款和订阅的方法是什么?
- java - 当 wifi 和蜂窝数据都打开且 wifi 没有互联网连接时,使用蜂窝数据上网
- android - 智能投射到“CredentialsClient!” 不可能跟随教程
- windows - 非 UEFI 主板 INSYDE BIOS 3.6 中的 MBR2GPT.exe 转换
- javascript - Angular *ngIf 不再重复