Question

我正在使用来自https://alligator.io/vuejs/file-select-component/的通用文件选择器组件，现在我希望能够从外部传递“accept”值。换句话说，我想做一些像

这样的事情

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

应转换为

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

但到目前为止，我尝试将此prop的值绑定到文件输入的accept属性都失败了（例如使用{{ 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，则accept会将function parseJwt(token) { try { // Get Token Header const base64HeaderUrl = token.split('.')[0]; const base64Header = base64HeaderUrl.replace('-', '+').replace('_', '/'); const headerData = JSON.parse(window.atob(base64Header)); // Get Token payload and date's const base64Url = token.split('.')[1]; const base64 = base64Url.replace('-', '+').replace('_', '/'); const dataJWT = JSON.parse(window.atob(base64)); dataJWT.header = headerData; // TODO: add expiration at check ... return dataJWT; } catch (err) { return false; } } const jwtDecoded = parseJwt('YOUR_TOKEN') ; if(jwtDecoded) { console.log(jwtDecoded) }添加为属性root，然后就可以按你的需要工作。

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

如上所述，您可以使用他们的示例代码创建自己的组件，该组件接收<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xs="http://www.w3.org/2001/XMLSchema" exclude-result-prefixes="xs" version="1.0"> <xsl:template match="@* | node()"> <xsl:copy> <xsl:apply-templates select="@* | node()"/> </xsl:copy> </xsl:template> <xsl:template match="*[@enable = 'yes']"/> <xsl:template match="*[@enable = 'false']"/> </xsl:stylesheet>道具并在正确的位置使用它。扩展可能比值得的更麻烦，仍然是有良好的信息。

Answer 2

您可以访问FileSelect组件的本机元素，并手动为其分配accept属性。

模板：

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

JS：

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

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

2 个答案: