Vue：如何在组件模板中使用道具值

Question

我正在使用来自https://alligator.io/vuejs/file-select-component/ 的通用文件选择器组件，现在我希望也能够从外部传递“接受”值。换句话说，我希望能够做类似的事情

<file-select :accept="application/json,.json"></file-select>

应该翻译成

<input type="file" accept="application/json,.json"/>

但到目前为止，我尝试将此道具的值绑定到文件输入的接受属性都失败了（例如，使用{{ accept }} 或this.accept）。我想知道是否可以直接在组件模板中使用 prop 值。任何想法将不胜感激！

Answer 1

您可以扩展他们的组件以添加accept 属性，但鉴于它是一个如此小的组件，您最好更改教程中提供的代码以添加prop。

Vue 添加任何non-prop attribute to the root element，因此当您执行<file-select :accept="application/json,.json"></file-select> 时，label 会将accept 添加为属性，如果input 是根，那么这将根据您的需要工作。

要了解如何扩展组件，还有一个 alligator.io tutorial on component composition 应该可以帮助您了解如何在 Vue 中实现这一点。但是，由于模板还没有为这个新道具做好准备，你需要完全覆盖 html。

如前所述，您可以使用他们的示例代码来创建您自己的组件，该组件接受 accept 属性并在正确的位置使用它。 扩展可能比值得拥有的好信息更麻烦。

Answer 2

您可以访问 FileSelect 组件的原生元素并手动为其分配接受属性。

模板：

<file-select ref="fileSelect"></file-select>

js:

mounted() {
    this.$refs.fileSelect.$el.accept = "application/json,.json";
}