lit-element - 如何从插槽按钮调用事件？答案

【问题标题】：lit-element - How to call an event from a slot button?lit-element - 如何从插槽按钮调用事件？
【发布时间】：2020-02-26 14:56:06
【问题描述】：

元素

import { LitElement, html } from 'lit-element';

class Component extends LitElement {
  render () {
    return html`
      <slot name="activator">
        <button @click="${this.openDialog}">Default Button</button>
      </slot>

      <custom-dialog></custom-dialog>
    `;
  }

  openDialog () {
    // code to open dialog
  }
}

customElements.define('custom-dialog', Component);

index.html

<head>
  <script type="module" src="src/custom-dialog.js"></script>
</head>
<body>
  <custom-dialog>
    <button slot="activator">Outside Button</button>
  </custom-dialog>
</body>

鉴于上面的自定义组件和我在一个简单的 html 页面上的实现。您会注意到我正在使用插槽按钮。

如何使用插槽按钮调用openDialog() 方法？

我检查了docs for events，但没有发现与此相关的内容。

提前致谢。

【问题讨论】：

标签： lit-element lit-html

【解决方案1】：

您需要插槽或插槽的某个祖先上的点击事件侦听器：

尝试将@click 绑定移动到槽元素本身。 click 事件冒泡，因此这将处理默认插槽内容按钮和来自 light DOM 的插槽按钮。这在 ShadyDOM 中可能不起作用，因此您可能希望将监听的事件放在插槽周围的包装元素上。

import { LitElement, html } from 'lit-element';

class Component extends LitElement {
  render () {
    return html`
      <slot name="activator" @click="${this.openDialog}">
        <button>Default Button</button>
      </slot>

      <custom-dialog></custom-dialog>
    `;
  }

  openDialog () {
    // code to open dialog
  }
}

customElements.define('custom-dialog', Component);

【讨论】：

“尝试将 @click 绑定移动到 slot 元素本身”。哇，这比在触发@slotchange 事件时向槽节点添加事件更有意义。这就是我到目前为止所做的。另一种解决方案是jquery方式document.getElementById('foo').openDialog()lol
@Justin Fagnani 如果同一个插槽中有两个按钮，如何区分是哪个按钮调用的？