Vue组合API调用子组件方法
提问于 2020-10-27 09:08:27
在v2中，this.$refs可以完成这项工作，但是在v3组合应用程序接口中如何做到这一点呢？
我尝试在Vue3中使用PrimeVue的CustomUpload功能，但是上传文件后接口没有清空，需要在父组件中调用子组件的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>谢谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-10-27 09:14:19
您可以使用template 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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64551167
复制
腾讯云开发者
