7

我已经看到了将函数从父 lit-element 传递给子元素的示例，例如这里 - https://medium.com/@westbrook/litelement-to-do-app-1e08a31707a4

但我希望我的元素的用户，而不是被迫创建一个包装元素来使用我的元素。

例如，我的元素是一个计算某个值的对话框。

我希望我能做这样的事情（使用我的元素的html）：

<script>
 function latLongResult(lat,long)
    {
        console.log("resulting lat long called");
    }

</script>
    <lat-long-chooser id="latLongDialog" resultingLatLong=${latLongResult(lat,long)}></lat-long-chooser>

然后在我的元素中：

export class LatLongChooser extends LitElement {


static get properties() {
    return {
      latDecimalDegrees: Number,
      longDecimalDegrees: Number,
      resultingLatLong: {
        type: Function,
      }
    };
  }

saveConvertedValues() {
       console.log("save other values called");
       this.resultingLatLong(this.latDecimalDegrees,this.longDecimalDegrees)
      }

当我尝试这个时，我得到 JavaScript 错误。

4

2 回答 2

6

您的元素代码很好，您尝试设置功能的方式有点不对劲。

你看，如果你在一个 lit-html/lit-element 渲染函数中，你正在使用的语法会起作用（只需进行一些更正，它会是.resultingLatLong=${latLongResult}）

但是，由于您在主级别的脚本中，您应该执行以下操作：

<script>
 function latLongResult(lat,long){
    console.log("resulting lat long called");
 }
 // do it like this so that it's set as a property, setting it as an attribute would require some rather complicated extra code
 document.querySelector('#latLongDialog').resultingLatLong = latLongResult;

</script>
<lat-long-chooser id="latLongDialog"></lat-long-chooser>

这是一个小故障，其中包含类似操作的最小示例

于 2018-11-12T18:32:36.203 回答
2

您还可以在您的属性中配置观察到的属性，resultingLatLong并lat-long-chooser设置attribute: false 如下：

static get properties() {
    return {
      latDecimalDegrees: Number,
      longDecimalDegrees: Number,
      resultingLatLong: {
        type: Function,
        attribute: false
      }
    };
  }

这将防止为属性创建观察到的属性。

于 2020-12-16T17:32:37.710 回答