Question

我有一个模板：

<element name="x-my-elem" constructor="MyElem" extends="div">
  <template>
    <div> 
      <button on-click="onClick()"> Button </button>
      <div id="displayMe">
      </div>
    </div>
  </template>
</element>

脚本：

class MyElem {
   onClick {
      query("#displayMe").innerHtml = "hello";
   }
}

现在，html文件中有多个组件实例：

<div is="x-my-elem" id="p1" ></div>
<div is="x-my-elem" id="p2" ></div>
...

我希望每个按钮只更改属于它的“displayMe”。怎么实现呢？有没有办法生成独特的ID？比这更好的东西[i]？

Answer 1

首先，我认为你应该更喜欢类的组件内部的类，因为你可以拥有组件的多个实例，就像你在这里一样。

无论哪种方式，将查询范围限定为组件的方法是使用this.query()而不是query()，如下所示：

class MyElem {
   onClick {
      this.query(".displayMe").innerHtml = "hello";
   }
}

Dart：当组件有多个实例时，如何引用组件元素？

1 个答案: