전혀 관련없는 컴포넌트끼리 서로 제어를 할 방법을 마땅히 못찾겠다.
이게 올바른 방법인지는 모르겠으나 잘 작동한다.
바로 이벤트를 이용한 방법이다.
[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’)은 작동이 된다.
