Как поймать пользовательские события из двух пользовательских элементов? - PullRequest
Новая
       17

Как поймать пользовательские события из двух пользовательских элементов?

0 голосов
/ 24 мая 2019

Я создал пользовательский компонент lit, у которого есть условие, и если условие ложно, оно должно прослушивать и событие, которое, если условие истинно, этот элемент срабатывает после нажатия на него. После того, как я создал буксировку этого элемента, один установил значение true, а другой - значение false, после того, как я запустил событие, событие, свойство которого было установлено в значение false, не перехватит его, даже если событие всплывает.

Чего мне не хватает, чтобы можно было перехватить события из другого элемента?

В элементе представления я вызываю пользовательский элемент два раза с разными реквизитами:

Свойство isRoot решает, запускает ли элемент или прослушивает событие 

<custom-element isRoot>Hello From Item</custom-element>
<custom-element>Hello From Item</custom-element>

Custom-element.js: 

class CustomElement extends LitElement {
  static get properties() {
    return {
        isRoot: { type: Boolean },
    }
  }

  static get styles() {
    return [
      css`
        span {
          width: 20px;
          display: inline-block;
          text-align: center;
          font-weight: bold;
        }
      `
    ];
  }

  render() {
    return html`
      <slot @click=${this.handleClick}></slot>
    `;
  }

  constructor() {
    super();
    this.isRoot = false;
    this.addEventListener("my-event", this.handleLoaded);
  }

  firstUpdated(changedProperties) {
  }

  handleLoaded(e){
    console.log("Listening")
    console.log(this.isRoot); 
    if(!this.isRoot){
        console.log(e.bubbles);
    }


  }

  handleClick(){
    if(this.isRoot){
        console.log("Fireing")
        let myEvent = new CustomEvent("my-event", { 
            detail: { message: 'my-event happened.' },
            bubbles: true, 
            composed: true });
          this.dispatchEvent(myEvent);
    }
  }
}

window.customElements.define('custom-element', CustomElement);

1 Ответ

0 голосов
/ 24 мая 2019

Здесь я попытался проиллюстрировать ваш код в качестве рабочего примера. Если это не соответствует вашим потребностям, пожалуйста, прокомментируйте, тогда мы можем работать над.

Демо 

import { LitElement, html, css } from '@polymer/lit-element'; 



class CustomElement extends LitElement {
  static get properties() {
    return {
        isRoot: { type: Boolean }
    }
  }


  render() {
    return html`
      <slot @click="${this.handleClick}"></slot><span>${this.isRoot}</span>

    `;
  }

  constructor() {
    super();

    this.addEventListener("my-event", this.handleLoaded);
  }

  handleLoaded(e){

    console.log("Listening", this.isRoot,' Message: ')
    if(!this.isRoot){
        console.log(e);
    }


  }

  handleClick(e){
    console.log('clicked')
    if(this.isRoot){
        console.log("Fireing",'1---', this.isRoot)
        let myEvent = new CustomEvent("my-event", { 
            detail: { message: 'my-event happened.' }
           });
          this.dispatchEvent(myEvent);
    }
  }

}

window.customElements.define('custom-element', CustomElement);
...