Vue组合API调用子组件方法

Question

TLDR；在 v2 中，this.$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>

谢谢

Answer 1

您可以使用 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>

Vue组合API调用子组件方法

Vue composition API calling child component method

javascript

vue.js

primevue

vuejs3

vue-composition-api