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

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

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

[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')은 작동이 된다.