alpine.js 외부에서 컴포넌트 제어하기 > IT 기술백서

IT 기술백서

직접 알아내거나 검색하기 귀찮아서 모아 둔 것

JavaScript | alpine.js 외부에서 컴포넌트 제어하기

본문

전혀 관련없는 컴포넌트끼리 서로 제어를 할 방법을 마땅히 못찾겠다.

이게 올바른 방법인지는 모르겠으나 잘 작동한다.

바로 이벤트를 이용한 방법이다.

 

[code]

<button x-data @click="$dispatch('openbox')">열기</button>

<button x-data @click="$dispatch('closebox')">닫기</button>


<div x-data="{ open: false}" @openbox.window="open=true" @closebox.window="open=false" x-show="open">

  Hello World!

</div>

[/code]

 

외부 자바스크립트에서 접근할때는 직접 이벤트를 발생시킨다.

[code]

<button type="button" onclick="clickHandler()">클릭</button>


<script>

function clickHandler() {

  window.dispatchEvent(new Event('openbox'))

}

</script>

[/code]

 

주의할 점은 이벤트명이 모두 소문자여야 한다.

카멜표기법(예: 'openBox')과 스네이크표기법(예: 'open_box')은 작동이 안되며 케밥표기법(예: 'open-box')은 작동이 된다.

 

댓글 0개

등록된 댓글이 없습니다.

Menu