JavaScript | alpine.js 외부에서 컴포넌트 제어하기
페이지 정보
- 작성자:
- 핵탐
- 작성일
- 07.07 22:45
- 조회
- 1,936
- 댓글
- 0
본문
전혀 관련없는 컴포넌트끼리 서로 제어를 할 방법을 마땅히 못찾겠다.
이게 올바른 방법인지는 모르겠으나 잘 작동한다.
바로 이벤트를 이용한 방법이다.
[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개
등록된 댓글이 없습니다.