EP.4 Communicate With Events in LWC

---

🔗 Decorator
@api : public, 컴포넌트의 속성이나 메서드를 노출 시킴. @api를 사용하게 되면 다른 컴포넌트에 해당 컴포넌트에 접근하고 상호작용 가능
** 부모 - 자식 컴포넌트의 경우, 하위 컴포넌트(=자식)에 사용

---

🪓 예제

---

1) 부모에서 입력 받은 값으로 자식 컴포넌트의 css 동적으로 변동

• childofp2cusingapi

  • html

    <template>
      <lightning-card title="Child with API property" icon-name="utility:user">
          <div class="slds-var-m-around_medium">
              <p>{percentage}%</p><br/>
              <div style={style}>.<br/></div>
          </div>
      </lightning-card>
    </template>

  • js

    import { LightningElement, api } from 'lwc';
    export default class Childofp2cusingapi extends LightningElement {
      @api percentage;
      get style (){
        return `background-color:red; min-height:50px; width: ${this.percentage}%; min-width:10px ; border: 1px`;
      }
    }

• parentofp2cusingapi

  • html

    <template>
      <lightning-card title="Parent with API Property" icon-name="utility:user">
          <div class="slds-var-m-around_medium">
              <lightning-input type="number" value={percentage} onchange={handleonchange}></lightning-input>
              <c-childofp2cusingapi percentage={percentage}></c-childofp2cusingapi>
          </div>
      </lightning-card>
    </template>

  • js

    import { LightningElement } from 'lwc';
    export default class Parentofp2cusingapi extends LightningElement {
      percentage = 20;
      handleonchange(event){
          this.percentage = event.target.value;
      }
    }

---

2) 부모 컴포넌트에서 버튼을 클릭해서 자식 컴포넌트 새로 고침

• childofp2cusingfunction
  • html

    <template>
      <lightning-card title="I am child with API function" icon-name="utility:user">
          <div class="slds-var-m-around_medium">
              <p>{timestamp}</p>
          </div>
      </lightning-card>
    </template>

  • js

    import { LightningElement, api } from 'lwc';
    export default class Childofp2cusingfunction extends LightningElement {
      timestamp = new Date();
      @api
      refresh() {
          this.timestamp = new Date();
      }
    }

• parentofp2cusingfunction
  • html

    <template>
      <lightning-card title="I am Parent with API function" icon-name="utility:user">
          <div class="slds-var-m-around_medium">
              <lightning-button label="Refresh" onclick={handleClick}></lightning-button>
              <br/>
              <c-childofp2cusingfunction></c-childofp2cusingfunction>
          </div>
      </lightning-card>
    </template>

  • js

    import { LightningElement } from 'lwc';
    export default class Parentofp2cusingfunction extends LightningElement {
      handleClick() {
          this.template.querySelector("c-childofp2cusingfunction").refresh();
      }
    }

---

3) 자식 컴포넌트에서 발생한 이벤트로 부모 컴포넌트 값 변경(이벤트 버블링)

• childComponentCommunication
  • html

    <template>
      <lightning-card title="Communicating" icon-name="utility:user">
          <div class="slds-var-m-around_medium">
              <lightning-button label="Count++" onclick={handleOnclick}></lightning-button>
          </div>
      </lightning-card>
    </template>

  • js

    import { LightningElement, api } from 'lwc';
    export default class ChildComponentCommunication extends LightningElement {
      endValue = 5;
      handleOnclick() {
          // this.dispatchEvent(new CustomEvent('increasecount'));
          console.log('HHHIIII');
          const myEventWithValue = new CustomEvent('increasecount', {
              detail : {
                  endValue : this.endValue,
                  msg : "Hello from Semy Leeeeee"
              }
          });
          this.dispatchEvent(myEventWithValue);
      }
    }

• parentofp2cusingfunction
  • html

  <template>
      <lightning-card title="I am Parent with API function" icon-name="utility:user">
          <div class="slds-var-m-around_medium">
              <lightning-button label="Refresh" onclick={handleClick}></lightning-button>
              <br/>
              <c-childofp2cusingfunction></c-childofp2cusingfunction>
          </div>
      </lightning-card>
  </template>

  • js

  import { LightningElement } from 'lwc';
  export default class ParentComponentCommunication extends LightningElement {
      count = 1;
      endValue = 0;
      msg = "";
      handleEventChange(event) {
          this.endValue = event.detail.endValue;
          this.msg = event.detail.msg;
          if(this.count < this.endValue) {
              this.count = this.count + 1;
          }
      }
  }