[code]
<div x-data=”{ pvar: ” }”>
<div>pvar: <input x-model=”pvar”></div>
<div>pvar: <span x-text=”pvar”></span></div>
<div x-data=”{ cvar: ” }” x-effect=”pvar = cvar”>
<div>cvar: <input x-model=”cvar”></div>
<div>pvar: <input x-model=”pvar”></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” 로 부모변수가 변경될때 자식변수도 동기화가 가능하다.