Vue.js 使用插槽确定可单击/触发不可见类型的输入事件的元素="；文件"；输入标签

我有一个基本组件，应该能够将多个文件上传到firestore。由于我希望能够在我的应用程序中跨多个点使用此组件，因此我希望利用插槽，以便可以更改覆盖隐藏输入标记的元素。因此，无论它是一个按钮，一个svg，等等，我仍然希望输入触发点击事件

目前，只有默认的

img

标记可以触发

@change

事件

我需要传递更多道具吗？在我目前的状态下，我如何才能使它工作

如果您需要更多信息，请告诉我

干杯

注意：我还没有让firestore上传的多文件选择工作，但我正在工作

上传MediaFiles.vue（子项）

导出默认值{
名称：“UploadMediaFiles”，
道具：{
多个：{type:Boolean}，
接受：{type:String}，
},
数据（）{
返回{
文件：[]，
}
},
计算：{}，
方法：{
异步添加媒体（事件）{
const selectedFiles=event.target.files
console.log（`selectedFiles→ `, 选定的文件）
此.files.push（selectedFiles）
this.$emit（'选定'，this.files）
},
},
}

选择并预览文件（父级）

上传档案
从“../atoms/UploadMediaFiles.vue”导入UploadMediaFiles
导出默认值{
名称：“SelectAndPreviewFiles”，
组成部分：{
上传媒体文件，
},
道具：{}，
数据（）{
返回{}
},
计算：{}，
方法：{
doSomething（文件）{
console.log（`files→ `, 文件）
},
},
}

您可以将一个方法传递给调用隐藏输入的

单击的插槽-处理程序：

在UploadMediaFiles中，将模板引用添加到输入：




在
UploadMediaFiles
中，创建一个组件方法，该方法调用输入的
单击
-处理程序：

导出默认值{
方法：{
openFileDialog（）{
这是.$refs.myInput.click（）
}
}
}


在UploadMediaFiles中，将组件方法传递到插槽：




在
选择并预览文件
中，将插槽道具绑定为按钮的
单击
-处理程序：


上传文件


感谢您的深入回复！这正是我想要的方式！我怀疑我可以把这个
@click=“openFileDialog”
添加到我用作插槽的任何标记中，是吗？很酷。