Question

我有一个呈现子标记counter.js的父文件index.js。每当更改child的属性时，都会触发一个事件，并且parent会监听它。为此，我必须在index.html中呈现两个标签，否则index.js无法在querySelector获取Null值时进行侦听。我想避免在index.html中使用x-counter标记。请查看以下链接中的文件： https://stackblitz.com/edit/js-fxhcp8

这是我的3个文件：

//1) index.js (Parent)
class XApp extends PolymerElement {
  constructor() {
    super();
    this.a = 15;
  }

  ready(){ 
    console.log("Done");
    super.ready();
    document.querySelector('x-counter').addEventListener('valueChange',function(e){
      console.log(e);
    });
}
  static get template() {
    return html`
     <x-counter></x-counter>
    `;
  }
}

customElements.define('x-app', XApp);

//2) counter.js (Child)
import { LitElement, html, property } from '@polymer/lit-element';

class XCounter extends LitElement {
  static get properties() {
    return {
      value: { type: Number }
    }
  }

  constructor() {
    super();
    this.value = 0;
  }

  render() {
    return html`
      <style>
        button, p {
          display: inline-block;
        }
      </style>
      <button @click="${() => this.decrement()}" aria-label="decrement">-</button>
      <p>${this.value}</p>
      <button @click="${() => this.increment()}" aria-label="increment">+</button>
    `;
  }

  decrement() {
    this.value--;
    this._valueChanged();
  }

  increment() {
    this.value++;
    this._valueChanged();
  }

  _valueChanged() {
    this.dispatchEvent(new CustomEvent('valueChange', { detail: this.value }));
  }
}

customElements.define('x-counter', XCounter);

//index.html
<!doctype html>
<html>
  <body>
<!-- Error without the below tag-->
      **<x-counter></x-counter>**
    <br />
    <x-app></x-app>
  </body>
</html>

Answer 1

这是一个有效的示例：我编辑您的代码。您的代码几乎准备就绪，我做了一些小的更改：

DEMO

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';

import './x-counter.js';

class IndexApp extends PolymerElement {
   constructor() {
    super();
    this.a = 15;
    this.addEventListener('value-changed', this._valueChanged)
  }

  static get template() {
    return html`
     <div>Parent element value : [[a]]</div>
      <x-counter 
         val="{{a}}" > 
      </x-counter>
    `;
  }
  _valueChanged(x){
      this.set('a', x.detail.val);
  }
}
customElements.define('index-app', IndexApp);

x计数器为：

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

class XCounter extends LitElement {
  static get properties() {
    return {
      val: { 
        type: Number 
        }
    }
  }

  render() {
    return html`
      <style>
        button, p {
          display: inline-block;
        }
      </style>
        <div id="div1">Hi</div>
        <div id="div2">This is a Lit </div>


      <button @click="${this.decrement}" aria-label="decrement">-</button>
      <p>value: ${this.val}</p>
      <button @click="${this.increment}" aria-label="increment">+</button></body>
    `;
  }

  decrement() {
    this.val--;
  }

  increment() {
    this.val++;
  }


  updated(props) {
    console.log("generated event", props);
    this.dispatchEvent(new CustomEvent('value-changed', {  bubbles: true, composed: true, detail: {val:this.val} }));

  }
}

customElements.define('x-counter', XCounter);

Litelement查询选择器为空

1 个答案: