1

我正在用 lit-element 编写一个 web 组件，我想知道如何在一个变量中渲染一个字符串，该变量仍然具有完整的@click 侦听器，带有 html“处理器”而不是纯字符串。

someFunction() {
    var someString=`<button @click="alert('hi')">blah</button>`;
    return html([someString]);
}
render() {
    return this.someFunction();
}

不起作用，而

someFunction() {
    return html`<button @click="alert('hi')">blah</button>`
}
render() {
    return this.someFunction();
}

作品。

谢谢你的帮助！

4

1 回答 1

2

这是不可能的。这是两个标记模板文字和函数调用根本不同的东西：

标记的模板文字

html`<button @click="alert('hi')">blah</button>`

html作为标记模板函数调用将调用带有htmln 参数参数的函数。首先是模板常量部分的数组，从第二个开始的参数将被插值。

普通函数调用

const someString = `<button @click="alert('hi')">blah</button>`;
html([someString]);

html作为函数调用html([someString])将使用数组作为其第一个参数调用该函数。

作为一种语言功能，浏览器需要从普通功能中理解标记模板。它发生在词汇/句法级别，因此标记函数必须并且必须后跟反引号（`）字符。

总之，html没有反引号就不能存在标记函数。您可以在MDN 文档上阅读更多内容。

于 2019-05-31T16:23:11.067 回答