带有参数的html注入调用函数

问题描述

我有一个问题，如果我想向我的click属性中添加一个参数，那么它将在呈现后立即调用该函数

这是我的测试html：

return html`
       <button class="menu-btn" @click="${this._OpenSubMenu(1)}>test</button>" 
`;

}

函数：

_OpenSubMenu(test:number) {
    console.log("Hello")
  }

页面呈现后，此输出Hello。

那么我如何在仍然向函数添加参数的同时避免这种情况呢？

解决方法

您需要使您的函数返回一个函数。然后，您的click函数将执行返回的函数，并且由于闭包的原因，仍然可以访问这些参数。

例如。

document.querySelector('ul').classList.add("nav")

如果您想访问_OpenSubMenu(test:number) { var that = this; return function () { console.log("Hello"); //test is also a closure so you can use here //that will equal this } } ，也可以使用箭头功能

this