Как передавать данные между шаблонами с подсветкой? - PullRequest
Новая
       54

Как передавать данные между шаблонами с подсветкой?

0 голосов
/ 19 февраля 2020

Я пытаюсь передать данные из одного компонента в другой. Моя идея состоит в том, чтобы иметь общий c компонент с кнопками, которые увеличивают или уменьшают значение и добавляют эти указанные c значения в другой шаблон.

Вот мой код с кнопками: 

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);

Вот шаблон, в который я хочу добавить данные, которые будут go к предыдущему шаблону: 

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);

Я пробовал разные способы, но ни один не работает. Есть идеи?

1 Ответ

0 голосов
/ 21 февраля 2020

Похоже, вы путаете value с num, maxValue с max и minValue с min.

Возможно, вам также понадобится текст внутри ваших a тегов, чтобы они были разумно кликабельными. Технически они также должны быть тегами button (стилизованными по вашему вкусу), так как теги a рассматриваются для ссылки на части страницы или на другую страницу (см. { ссылка } для получения дополнительной информации). , Тогда вам не понадобятся e.preventDefault(); внутри decrement и increment. 

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