alpine.js 부모와 자식컴포넌트 사이의 데이터 동기화 (이벤트 방식X) > IT 기술백서

[code]

<div x-data="{ pvar: '' }" style="border:1px solid #f00; padding:5px">

    <div>pvar: <input x-model="pvar" style="border:1px solid #ddd"></div>

    <div>pvar: <span x-text="pvar"></span></div>

    <div x-data="{ cvar: '' }" x-effect="pvar = cvar" style="border:1px solid #00f; padding: 5px">

        <div>cvar: <input x-model="cvar" style="border:1px solid #ddd"></div>

        <div>pvar: <input x-model="pvar" style="border:1px solid #ddd"></div>

        <div>pvar: <span x-text="pvar"></span></div>

        <div>cvar: <span x-text="cvar"></span></div>

    </div>

</div>

[/code]

자식 컴포넌트에서는 부모의 변수를 scope 개념으로 사용할 수 있다.

x-effect 로 부모의 변수를 실시간으로 감시해 변경할 수 있고 그 반대도 가능하다.

위에서는 x-effect="pvar=cvar" 로 했지만 x-effect="cvar=pvar" 로 부모변수가 변경될때 자식변수도 동기화가 가능하다.