将数据传递给 Web 组件

Question

我有以下网络组件：

import { Component, h, Element, Prop } from '@stencil/core';
import { Schedule } from '../../interfaces/schedule';

@Component({
    tag: 'event-schedules-tab',
    styleUrl: 'event-schedules-tab.css'
})
export class EventSchedulesTab {
    /**
       * The first name
       */
    @Prop() schedules: Schedule[];
    @Element() element: HTMLElement;

    componentDidLoad() {
        this.displayTickets();
    }

    displayTickets() {
        if (this.schedules !== undefined) {
            let divSchedules: HTMLDivElement = this.element.querySelector("#schedules");
            for (let i = 0; i < this.schedules.length; i++) {
                let eventSchedule = document.createElement("event-schedule");
                eventSchedule.schedule = this.schedules[i];
                divSchedules.appendChild(eventSchedule);
            }
            console.log("schedules is defined");
        }

        console.log("display schedules");
    }

    render() {
        return [
            <div id="schedules" class="bg-gray-100"></div>
        ];
    }
}

现在在另一个 Web 组件中我显示了这个标签：

import { Component, h, Prop, Element } from '@stencil/core';
import { EventItem } from '../../interfaces/event-item';
import { Event } from '../../services/event'

@Component({
    tag: 'event-details',
    styleUrl: 'event-details.css'
})
export class EventDetails {
    /**
        * The first name
        */
    @Prop() slug: string;
    @Element() element: HTMLElement;
    private eventsService: Event = new Event();

    componentDidLoad() {

        this.displayEvent();

    }

    async displayEvent() {
        if (this.slug !== undefined) {
            this.eventsService.fetchTickets(this.slug).then(async (response) => {
                let event: EventItem = await response.json();

                let thumbnail: HTMLElement = this.element.querySelector(".modal .thumbnail");
                thumbnail.setAttribute("src", event.banners[0]);

                let category: HTMLElement = this.element.querySelector(".modal .category");
                category.innerText = event.category;

                let title: HTMLElement = this.element.querySelector(".modal .title");
                title.innerText = event.name;

                let description: HTMLElement = this.element.querySelector(".modal .description");
                description.innerText = event.description;

                let eventSchedulesTab: HTMLEventSchedulesTabElement = this.element.querySelector("event-schedules-tab");
                eventSchedulesTab.schedules = event.schedules;

                let eventSummaryTab = this.element.querySelector("event-summary-tab");
                eventSummaryTab.summary = event.description;

                //console.log(event);
            }, (error) => {
                console.log(error);
            })
        }
    }

    render() {
        return [
            <div class="flex flex-col">
                <event-schedules-tab></event-schedules-tab>
                <event-summary-tab></event-summary-tab>
            </div>
        ];
    }

}

加载我的事件详细信息组件时，会从我的服务器获取数据并将响应分配给我的事件计划选项卡组件：

let eventSchedulesTab: HTMLEventSchedulesTabElement = this.element.querySelector("event-schedules-tab");
eventSchedulesTab.schedules = event.schedules;

现在我的问题是出于某种原因，在执行此代码后，我的事件计划选项卡中的计划属性始终显示为未定义。

我已确认从服务器返回了正确的响应。

Answer 1

这是因为你在"EventSchedulesTab"中使用了componentDidLoad，但是你在使用的时候没有"schedules"定义，然后didload方法执行无结果，然后当你更改属性但除了渲染之外没有执行任何功能。您可以使用 @Watch 来安排执行所需的功能

或者您也可以根据属性进行渲染，例如：

render() {
  return (<div id="schedules" class="bg-gray-100">{this.schedules.map((s) => <event-schedule schedule={s}></event-schedule>)}</div>)
}

这将使您的代码对属性更改做出反应，因为如果 "schedules" 属性更改，将执行渲染

将数据传递给 Web 组件

Passing Data to Web Component

typescript

stenciljs