我正在使用 https://alligator.io/vuejs/file-select-component/ 中的通用文件选择器组件现在我希望也能够从外部传递“接受”值。换句话说，我希望能够做类似的事情
<file-select :accept="application/json,.json"></file-select>
应该翻译成
<input type="file" accept="application/json,.json"/>
但到目前为止，我尝试将此 Prop 的值绑定(bind)到文件输入的接受属性都失败了(例如使用 {{ accept }} 或 this.accept )。我想知道是否可以直接在组件模板中使用 prop 值。任何想法将不胜感激!
最佳答案
您可以扩展其组件以添加 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 中实现这一点。但是，由于模板尚未准备好支持此新 Prop ，因此您需要完全覆盖 html。
如上所述，您可以使用他们的示例代码来创建您自己的组件，该组件接受 accept prop 并在正确的位置使用它。
扩展可能比获得仍然有值(value)的好信息更麻烦。
关于javascript - Vue : How to use prop value inside component template，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50819342/