如何在Vue模板中访问子组件q-uploader的files计算属性？

问题背景 #

尝试访问Quasar框架QUploader组件的计算属性files（数组类型），希望根据该数组的长度通过:style控制组件的显示隐藏，但在<script setup>中使用this或$this均无效，现有模板及TS代码如下：

原模板代码

<template>
  <q-dialog ref="dialogRef">
    <q-card class="q-dialog-plugin" style="width: 700px; max-width: 80vw;">
      <q-form class="q-gutter-md exportForm">
        <div>
          <div class="row">
            <div class="col-4">
              <div>
                <div class="fileUploaderContainer">
                  <q-uploader ref="fileUploader" class="fileUploader" url="http://localhost:4444/upload" :style="{display: 1 > 0 ? '' : 'none', 'max-width': '250px'}"/>
                  <div class="fileUploadInitializer" style="width: 200px; height: 100px; background: #f00;" @click="startUploader($event)" >
                  </div>
                </div>
              </div>
            </div>
            <div class="col-8">col-8</div>
          </div>
        </div>
      </q-form>
    </q-card>
  </q-dialog>
</template>

原Script代码

<script lang="ts" setup>
import { QUploader, useDialogPluginComponent } from 'quasar';
import { nextTick, onMounted, ref } from 'vue';

const fileUploader = ref()
const files = ref([]);

function startUploader(event: MouseEvent){
  console.log('test');
  fileUploader.value.pickFiles(event)
}

defineEmits([...useDialogPluginComponent.emits]);
</script>

解决方案 #

在<script setup>语法中不存在this，需通过组件的ref实例直接访问其计算属性，具体实现有两种方式：

方式1：直接在模板中通过ref访问files属性

修改QUploader的:style绑定，直接使用fileUploader?.files?.length判断显示状态（链式操作符可避免组件未挂载时的报错）：

<q-uploader 
  ref="fileUploader" 
  class="fileUploader" 
  url="http://localhost:4444/upload" 
  :style="{display: fileUploader?.files?.length > 0 ? '' : 'none', 'max-width': '250px'}"
/>

同时可删除脚本中无用的const files = ref([]);定义。

方式2：监听files属性同步到本地ref（需额外逻辑时使用）

如果需要在脚本中对files数组做额外处理，可通过watch监听组件的files属性，同步到本地ref：

<script lang="ts" setup>
import { QUploader, useDialogPluginComponent } from 'quasar';
import { ref, watch } from 'vue';

const fileUploader = ref()
const localFiles = ref([]);

// 监听QUploader的files属性变化
watch(
  () => fileUploader.value?.files,
  (newFiles) => {
    localFiles.value = newFiles || [];
    // 这里可添加其他业务逻辑
  },
  { deep: true, immediate: true } // deep监听数组变化，immediate初始化时触发
);

function startUploader(event: MouseEvent){
  fileUploader.value.pickFiles(event)
}

defineEmits([...useDialogPluginComponent.emits]);
</script>

此时模板中可使用localFiles.length控制显示：

:style="{display: localFiles.length > 0 ? '' : 'none', 'max-width': '250px'}"

内容的提问来源于stack exchange，提问作者Hex