Naive script setup写法上传注意

Naive UI官网写法

<template>
  <n-button
    :disabled="!fileListLength"
    style="margin-bottom: 12px"
    @click="handleClick"
  >
    上传文件
  </n-button>
  <n-upload
    ref="upload"
    action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
    :default-upload="false"
    multiple
    @change="handleChange"
  >
    <n-button>选择文件</n-button>
  </n-upload>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import type { UploadInst, UploadFileInfo } from 'naive-ui'

export default defineComponent({
  setup () {
    const fileListLengthRef = ref(0)
    const uploadRef = ref<UploadInst | null>(null)

    return {
      upload: uploadRef,
      fileListLength: fileListLengthRef,
      handleChange (options: { fileList: UploadFileInfo[] }) {
        fileListLengthRef.value = options.fileList.length
      },
      handleClick () {
        uploadRef.value?.submit()
      }
    }
  }
})
</script>

改成script setup写法

<template>
  <n-button
    style="margin-bottom: 12px"
    @click="handleClick"
  >
    上传文件
  </n-button>
  <n-upload
    ref="uploadRef"
    action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
    :default-upload="false"
    multiple
    @change="handleChange"
  >
    <n-button>选择文件</n-button>
  </n-upload>
</template>

<script setup lang="ts">
import type { UploadFileInfo, UploadInst } from 'naive-ui'

const fileListLengthRef = ref(0)
const uploadRef = ref<UploadInst | null>(null)

const handleChange = (options: { fileList: UploadFileInfo[] }) => {
  fileListLengthRef.value = options.fileList.length
}
const handleClick = () => {
  uploadRef.value?.submit()
}
</script>

</script>

下边的命名要跟上边的ref的名称一致