如何在lit-element模板之间传递数据？

Question

我正在尝试将数据从一个组件传递到另一个组件。我的想法是有一个带有按钮的通用组件，这些按钮可以增加或减少一个值，并将这些特定值​​添加到另一个模板。

下面是我的按钮代码：

​

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

class ButtonsCounter extends LitElement {
    static get properties() {
        return {
            max: {type: Number},
            min: {type: Number},
            num: {type: Number},
            value: {type: Number},
        };
    }

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

    createRenderRoot() {
        return this;
    }

    increment(e) {
        e.preventDefault();
        if (this.value < this.maxValue) this.value++;
    }

    decrement(e) {
        e.preventDefault();
        if (this.value > this.minValue) this.value--;
    }

    render(){
        return html`
            <div class="searchCounter" max=${this.maxValue} min=${this.minValue}>
                <a href="#" @click="${this.decrement}"></a>
                <span num=${this.value}>${this.value}</span>
                <a href="#" @click="${this.increment}"></a>
            </div>
        `;
    }
}

customElements.define('buttons-counter', ButtonsCounter);

​

下面是我要在其中添加数据的模板，这些数据将转到前一个模板：

​

import { LitElement, html } from 'lit-element';
import './buttons-counter'

class SelectOption extends LitElement {
    constructor() {
        super();
        this.num = 0;
        this.max = 5;
        this.min = 0;
    }

    createRenderRoot() {
        return this;
    }

    render(){
        return html`
            <buttons-counter .max="${this.max}" .min="${this.min}" .num="${this.num}"></buttons-counter>
        `;
    };
}

customElements.define('select-option', SelectOption);

​

我试过不同的方法，但都不管用。有什么想法吗？

Answer 1

看起来你把value和num混淆了，把maxValue和max混淆了，把minValue和min混淆了。

您可能还需要在a标记中包含一些文本，以便可以合理地单击它们。从技术上讲，它们也应该是button标签(根据您的喜好设置样式)，因为a标签被认为是用于链接到页面的各个部分或另一个页面(有关更多详细信息，请参见https://stackoverflow.com/a/37148542/6090140 )。然后，您将不再需要在decrement和increment中使用e.preventDefault();。

<button @click="${this.decrement}">-</button>