웹 구성 요소 구축 101 - 4부

3부에서는 사용자 지정 특성을 만드는 방법을 다룹니다. 사용자 지정 웹 구성 요소에 대한 사용자 지정 이벤트를 만드는 방법에 대한 이 문서에서 계속하겠습니다.

3부에서 중단한 부분부터 시작하겠습니다. 이 기사의 소스 코드에 액세스하려면 https://github.com/tebinraouf/learning-fast/tree/building-web-components-101-part-4에서 프로젝트를 복제할 수 있습니다.

또는 Stackblitz를 사용할 수 있습니다.

stackblitz.com

속성을 사용하여 웹 구성 요소에 데이터를 전송/전달합니다. 이벤트는 데이터를 가져오거나 웹 구성 요소의 소비자에게 데이터를 보내 애플리케이션 논리를 구축하는 데 사용할 수 있도록 하는 데 유용합니다.

맞춤 이벤트를 만들려면 다음 두 단계를 따르세요.

웹 컴포넌트 템플리트에서 사용자 정의 이벤트를 수신할 요소를 식별하십시오.

사용자가 사용자 정의 이벤트를 추가하고 데이터를 가져올 수 있도록 이벤트를 내보내십시오.

여기서는 onClick을 h1 요소에 추가하여 클릭할 때마다 새 데이터를 고객에게 보내도록 합니다. 이 경우 클릭하면 새 Albert Einstein 인용문을 다시 보냅니다. 이 새 견적을 처리하는 방법은 사용자에게 달려 있습니다. 이 예에서는 견적을 업데이트합니다.

자세한 단계:

h1.template.ts을 업데이트하고 onClick 이벤트 수신기를 추가합니다. FAST에서 이벤트 리스너를 추가하는 구문은 @click="${x => x.handler()}"입니다. 여기서 @click은 onClick인 이벤트 이름이고 x.handler()은 요소 클래스의 핸들러/컨트롤러이며 사용자 정의 요소 클래스가 생성되는 h1.ts에 정의됩니다.

import { html } from "@microsoft/fast-element";


export const template = html`
-    <h1 style="color: ${x => x.color}">
+    <h1 style="color: ${x => x.color}" @click="${x => x.handler()}">
        <slot></slot>
    </h1>

개인 메서드 h1.ts 을 포함하도록 handler 업데이트. 아무 이름이나 가능합니다.

    private handler() {
        this.$emit('colorhandler')
    };

이렇게 함으로써 이제 웹 구성 요소 소비자는 아래와 같이 웹 구성 요소에 사용자 지정 이벤트 colorhandler을 추가할 수 있습니다.

맞춤 요소에 ID를 추가했습니다.

<tebin-h1 color="blue" id="blue-title">Albert Einstein</tebin-h1>

그런 다음 addEventListener 을 사용하여 colorhandler 이라는 사용자 지정 이벤트를 추가합니다.

    <script>
        document.getElementById("blue-title").addEventListener('colorhandler', function (e) {
//business logic
        });
    </script>

웹 요소 소비자에게 데이터를 보내는 방법은 무엇입니까?

이 예에서는 사용자 지정 이벤트 colorhandler을 통해 새 견적을 무작위로 보냅니다. 이를 위해 emit the colorhandler 일 때 아래와 같이 데이터를 전송합니다.

    private handler() {
        const quotes = ["We cannot solve our problems with the same thinking we used when we created them", "The true sign of intelligence is not knowledge but imagination.", "I have no special talent. I am only passionately curious.", "The only reason for time is so that everything doesn't happen at once.", "Only a life lived for others is a life worthwhile."];
        const random = Math.floor(Math.random() * quotes.length);

        this.$emit('colorhandler', quotes[random])
    };

데이터는 무엇이든 될 수 있습니다. 이 경우 문자열을 다시 보냅니다.

마지막으로 웹 요소 소비자는 아래와 같이 이벤트 내역 즉 e.detail을 통해 견적을 받을 수 있습니다.

    <script>
        document.getElementById("blue-title").addEventListener('colorhandler', function (e) {
            document.getElementById("ae-quote").innerText = e.detail;
        });
    </script>

이제 누군가 사용자 정의 웹 요소 제목을 클릭할 때마다 설명이 새 인용구로 변경됩니다.