lit-element

Question

元素

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，但没有发现与此相关的内容。

提前致谢。

Answer 1

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

尝试将 @click 绑定移动到插槽元素本身。 click 事件冒泡，因此这将处理默认插槽内容按钮和来自灯光 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);

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

lit-element - How to call an event from a slot button?

lit-html